Question

由于我正在处理的应用程序的复杂性，我决定使用嵌套的redux容器，而不是将一个动作作为prop传递给子组件。但是，在将OuterContainer与mocha，chai，sinon和<OuterContainer> <div> <InnerContainer /> </div> </OuterContainer>结合使用时，单元测试已证明存在问题。

以下是视图结构的一个人为举例：

OuterContainer

InnerContainer＆amp; export connect(<mapStateToProps>)(<Component>)包含在connect中。 e.g：

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

有没有办法打开或存根sudo apt-get install python3-pyqt5进行单元测试而不必使用浅层渲染？

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

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

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

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

我刚刚在Root组件中添加了一个属性＆＃34; store = {store}＆＃34;见下文：

    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>
    );

导出默认Root;

希望能帮助别人！

Answer 4

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

在describe()之前添加此内容。

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

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

4 个答案: