用 Jest 模拟 React-Redux 商店

Posted 2023-03-10

【中文标题】用 Jest 模拟 React-Redux 商店

【英文标题】：Mocking React-Redux Store With Jest

【发布时间】：2020-12-04 16:54:39

【问题描述】：

我们的 React-Redux 应用程序使用 create-react-app。我们正在尝试将 Jest/Enzyme/redux-mock-store 反向应用到大型代码库。我们的 src/store.js 文件是标准的 react-redux 脚本，它运行 reducer 并构造初始状态。这个 src/store.js 是问题的核心。

问题是当我们开始 jest 测试运行时，jest 会加载 src/store.js 7 次，然后（大致）每次测试一次。 我必须抑制它，但不知道怎么做。我必须抑制它的原因是它总是以初始状态离开商店，并且有一个关键的 AppConfig 属性在那个必须填充的商店中，以防止停止开玩笑的 javascript 错误。我已经有一个函数，它返回一个模拟商店以供 Provider 使用。效果很好。但是我们的组件从constructor()、componentDidMount()等调用api函数。这些 api 函数看不到从 Provider 删除的状态。相反，api 函数会做这样的事情：

    // AppConfig is an immutable Map 
    const  AppConfig  = store.getState();
    const stuff = AppConfig.get(‘stuff’).toJS();

这是一个 JS 错误，因为 AppConfig 为空，并且在未定义时调用了 toJS()。 （这在运行时永远不会成为问题，因为我们在没有准备好 AppConfg 的情况下构建任何组件。）我可以做 2 种涉及重构应用程序的解决方案。但我更想弄清楚如何正确使用 jest。如何提供模拟 redux 状态而不被 jest 重复加载的 src/store.js 破坏？？？

这可要了我的命。开玩笑，create-react-app 或 ???启动这些不需要的 src/store.js 负载？如何覆盖？是否存在导致 jest 调用我的函数而不是 src/store.js 的配置？

【参考方案1】：

我发现了自己的问题。会在这里发帖，以防其他新开玩笑的人可能会从我的愚蠢中受益。

Jest 不加载 src/store.js。罪魁祸首是我的浅层组件测试，因为组件有这样的语句：

import StuffService from '../../api/stuff';

组件对 api 的调用如下所示：

// e.g. from componentDidMount
StuffService.get.myRequest();

但是在定义 StuffService 的 es6 模块中，在顶部我们有类似的内容：

import store from '../../store';

// lower in the js file, we have code as shown in my previous post:
const  AppConfig  = store.getState();

这就是导致 src/store 继续运行的原因。将研究 Jest 的 Manual Mocks 以获得解决方案。