Question

我正在使用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 />
      );
    });

我收到此错误：

错误：未被捕获[不变违规：在任一位置都找不到“存储” “ Connect（ChooseIndex）”的上下文或道具。包根中的组件，或显式传递“ store”作为道具 “ Connect（ChooseIndex）”。]

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

Answer 1

尝试这样渲染您的组件：

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

并通过您在应用中使用的实际商店。这样，您就可以测试将在生产中使用的真实逻辑。您也不必关心将调度哪些操作以及状态如何。您将查看呈现的内容并与UI交互，这才是最重要的。

将组件与Redux分开，并分别测试两者，这与react-testing-library的全部观点背道而驰。您想像真实用户一样测试您的应用。

Answer 2

如果您查看redux文档的writing tests部分，则有一个示例测试连接的组件。

当您将其导入[redux连接的组件]时，实际上是持有connect（）返回的包装器组件，而不是App组件本身。 如果要测试其与Redux的交互，这是个好消息：您可以将其包装在专门为此单元测试创建的商店中。但是有时您只想测试组件的呈现，而不需要Redux存储。

为了能够测试App组件本身而不必与装饰器打交道，我们建议您也导出未装饰的组件

与大多数单元测试一样，您确实要测试组件，而不是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)

测试React组件时要模拟Redux存储吗？

2 个答案: