5

我正在使用 React 和 Redux。我有一个加载的组件，ChildComponent根据 Redux 的状态也会加载MainComponent

    const ChooseIndex = ({ appInitMount }) => {
      return (
        <>
          <ChildComponent />
          {!appInitMount && <MainComponent />}
        </>
      );
    };


    const mapStateToProps = ({ main }) => {
      return {
        appInitMount: main.appInitMount
      };
    };

    export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(ChooseIndex);

我正在尝试编写一个测试来检查是否ChildComponent已加载：

    import React from "react";
    import { render } from "react-testing-library";
    import ChooseIndex from "../choose-index";

    test("ChooseIndex should call ChildComponent", () => {
      const wrapper = render(
        <ChooseIndex />
      );
    });

我收到此错误：

错误：未捕获 [不变违规：在“连接（ChooseIndex）”的上下文或道具中找不到“商店”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递给“Connect(ChooseIndex)”。]

我应该通过将对象文字传递给来模拟 ReduxChooseIndex吗？或者我应该为每个测试创建一个 Redux 存储（就像我的真实应用程序那样）？

4

2 回答 2

1

如果您查看 redux 文档的编写测试部分，这里有一个测试连接组件的示例。

当你导入它 [A redux connected component] 时，你实际上持有的是 connect() 返回的包装器组件，而不是 App 组件本身。如果你想测试它与 Redux 的交互，这是个好消息：你可以将它包装在一个专门为此单元测试创​​建的 store 中。但有时您只想测试组件的渲染，而不需要 Redux 存储。

为了能够在不处理装饰器的情况下测试 App 组件本身，我们建议您也导出未装饰的组件

与大多数单元测试一样，您确实想测试您的组件，而不是 redux 是否正常工作。因此，您的解决方案是导出组件和连接的组件，同时仅测试组件本身，并提供 redux 传递给您的组件的任何道具。

import { connect } from 'react-redux'

// Use named export for unconnected component (for tests)
export class App extends Component {
  /* ... */
}

// Use default export for the connected component (for app)
export default connect(mapStateToProps)(App)
于 2018-10-25T04:13:48.693 回答
1

尝试像这样渲染您的组件：

render(
  <Provider store={store}>
    <ChooseIndex />
  </Provider>
)

并传递您在应用中使用的实际商店。通过这种方式，您正在测试您将在生产中使用的真实逻辑。您也不关心发送了哪些操作以及状态是什么。您会查看渲染的内容并与 UI 交互——这才是最重要的。

将组件与 Redux 分离并单独测试两者是违背react-testing-library. 您想像真实用户一样测试您的应用程序。

于 2018-10-25T07:35:04.677 回答