a

Câu hỏi Làm thế nào để kiểm tra một thành phần với một thùng chứa lồng nhau với React và Redux?


Do sự phức tạp của ứng dụng tôi đang làm việc trên, tôi đã quyết định sử dụng một thùng chứa redux lồng nhau thay vì truyền một hành động như một biện pháp chống đỡ cho các thành phần con. Tuy nhiên, điều này đã chứng minh là có vấn đề đối với thử nghiệm đơn vị khi hiển thị OuterContainer với jsdom kết hợp với mocha, chai và sinon.

Đây là một ví dụ giả tạo về cấu trúc khung nhìn:

<OuterContainer>
  <div>
    <InnerContainer />
  </div>
</OuterContainer>

Ở đâu OuterContainer & InnerContainer được bọc với kết nối. ví dụ.:

export connect(<mapStateToProps>)(<Component>)

Khi chạy thử, lỗi tôi nhận được là: Invariant Violation: Could not find "store" in either the context or props of "Connect(Component)". Either wrap the root component in a `<Provider>`, or explicitly pass "store" as a prop to "Connect(Component)".

Có cách nào để tháo gỡ hoặc cạy InnerContainer để kiểm tra đơn vị mà không phải sử dụng kết xuất cạn?


14
2018-03-23 10:33


gốc




Các câu trả lời:


Quấn thành phần của bạn vào <Provider> khi thử nghiệm. Tùy thuộc vào bạn có cung cấp một cửa hàng thực hay một mô hình với { dispatch, getState, subscribe } cho nó. Bao bọc thành phần ngoài cùng trong <Provider store={store}> cũng sẽ làm cho cửa hàng có sẵn cho các thành phần con ở mọi cấp độ lồng nhau - giống như trong chính ứng dụng.

const store = createStore(reducer) // can also be a mock
ReactTestUtils.renderIntoDocument(
  <Provider store={store}>
    <OuterContainer />
  </Provider>
)

22
2018-03-23 13:42



Tuyệt quá! Cảm ơn vì lời khuyên. Đưa cái này đi ngay :) - Jon Yardley
Làm việc như một say mê. Cảm ơn một lần nữa @DanAbramov! - Jon Yardley
@ dan-abramov: công trình này. Tuy nhiên, nó không thực sự là một bài kiểm tra đơn vị nữa. Enzyme có shallow, nhưng nó vẫn đi sâu với một thành phần con được kết nối. Bạn có bất kỳ ý tưởng nếu nó có thể chỉ cần kiểm tra nếu <InnerContainer /> là có mà không cần vẽ nó? - publicJorn
Tôi echo @publicJorn quan tâm. Tôi thích giải pháp này bản thân mình, nhưng nó làm cho các bài kiểm tra cách phức tạp hơn họ nên được. - csvan


Một cách tiếp cận khác là xuất cả thành phần được kết nối và vùng chứa. Các container như mặc định, tất nhiên.

export const Comp = (props) => (<p>Whatever</p>)
export default connect(...)(Comp)

Do đó, bạn có thể kiểm tra đơn vị Comp.


0
2018-03-03 20:58



Nhưng điều này đánh bại mục đích thử nghiệm thành phần với liên kết Redux hoàn chỉnh. Phải không? - shobhit1
@ shobhit1 nhưng sau đó bạn đang thử nghiệm thành phần của mình và connect đã được thử nghiệm bởi react-redux. Không phải là xấu, không tốt. Bạn chỉ cần overtesting sau đó. - sospedra
Điều này sẽ không hoạt động nếu, như trong câu hỏi, Comp tự nhập và sử dụng một vùng chứa khác. Các nhà thầu phụ sau đó sẽ mong đợi store có mặt và thử nghiệm sẽ thất bại. - csvan


Không chắc chắn nếu đây là vấn đề của bạn, nhưng tôi chắc chắn điều này có thể sẽ giúp một vài người ra có nhìn vào nguồn cấp dữ liệu này.

Tôi đã có lỗi tương tự và đó là một sửa chữa đơn giản:

Tôi đã quên để vượt qua thành phần của tôi đối tượng cửa hàng của tôi trong tập tin nhập cảnh của tôi (sử dụng webpack).

Tôi vừa thêm thuộc tính vào thành phần Gốc "store = {store}", xem bên dưới:

    document.addEventListener("DOMContentLoaded", () => {
      const store = configureStore();
       ReactDOM.render(<Root store={store} />, 
     document.getElementById('content'));
    });

Đây cũng là mã nguồn gốc của tôi để tham khảo:

    import React from 'react';
    import { Provider } from 'react-redux';
    import App from './app';

    const Root = ({ store }) => (
     <Provider store={ store }>
        <App />
     </Provider>
    );

xuất Root mặc định;

Hy vọng rằng sẽ giúp một ai đó!


0
2018-03-01 00:35





Mock the Provider để trả về thành phần con.

Thêm mục này trước describe().

jest.mock('Provider', () => ({children}) => children);


0
2018-03-04 13:39