javascript - 如何使用 React 和 Redux 测试带有嵌套容器的组件？

Question

由于我正在处理的应用程序的复杂性，我决定使用嵌套的 redux 容器，而不是将操作作为 prop 向下传递给子组件。然而，这已被证明在渲染 OuterContainer 时对单元测试有问题。与 jsdom结合 mocha , chai和 sinon .

这是 View 结构的人为示例:

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

哪里OuterContainer & InnerContainer用连接包裹。例如:

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

运行测试时，我得到的错误是: 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)".

有没有办法解包或 stub InnerContainer无需使用浅层渲染即可进行单元测试？

Answer 1

将您的组件包装在 <Provider> 中测试时。由您决定是提供真实商店还是模拟 { dispatch, getState, subscribe }给它。将最外层组件包裹在 <Provider store={store}> 中还将使商店可供任何嵌套级别的子组件使用——就像在应用程序本身中一样。

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