首页 文章

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

提问于
浏览 次
14

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

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

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

其中 OuterContainer ＆ InnerContainer 用connect包装 . 例如 . ：

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 进行单元测试而不必使用浅层渲染？

javascript reactjs mocha redux jsdom

4 回答

  • 0

    测试时将组件包装在 <Provider> 中 . 这取决于你是否提供真正的商店或模拟 { dispatch, getState, subscribe } . 在 <Provider store={store}> 中包装最外面的组件也将使存储可用于任何嵌套级别的子组件 - 就像在应用程序本身中一样 .

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

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

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

    因此，您可以单元测试 Comp .

    回复于
  • 22

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

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

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

    我刚刚在Root组件“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;

    希望有人帮助！

    回复于
  • 0

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

    在 describe() 之前添加此项 .

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

    回复于

相关问题