时间戳

首页 > 解决方案 > 用 Jest 模拟 React-Redux 商店

reactjs - 用 Jest 模拟 React-Redux 商店

问题描述

我们的 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 种涉及重构应用程序的解决方案。但我宁愿弄清楚如何正确使用笑话。我怎样才能提供模拟 redux 状态而不会被 jest 重复加载的 src/store.js 破坏？

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

标签： reactjsreduxjestjs

解决方案

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

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 以获得解决方案。

推荐阅读