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

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”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递给“Connect(ChooseIndex)”。]

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

Answer 1

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

\n\n

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

\n\n

并传递您在应用程序中使用的实际商店。通过这种方式，您可以测试将在生产中使用的真实逻辑。您也不关心调度什么操作以及状态中有什么。您查看渲染的内容并与 UI\xe2\x80\x94 交互，这才是最终重要的。

\n\n

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

\n