如何使用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>
)

Answer 2

另一种方法是导出要连接的组件和容器。当然，容器是默认的。

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

因此，你可以单独测试Comp。

Answer 3

不确定这是不是你的问题，但我相信这可能会帮助那些看这个饲料的人。

我有同样的错误，这是一个简单的修复：

我忘了在我的条目文件中传递我的组件我的商店对象（使用webpack）。

我刚刚在Root组件“store = {store}”中添加了一个属性，如下所示：

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

这是我的根文件代码以供参考：

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

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

export default root;

希望有人帮助！

Answer 4

模拟Provider组件以返回子组件。

在describe()之前加上这个。

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