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

Question

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

这是一个人为的视图结构示例:

<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)".

有没有办法解开或存根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>
)