ReactJS - 导入存储中断 Jest答案

【问题标题】：ReactJS - Importing store breaks JestReactJS - 导入存储中断 Jest
【发布时间】：2026-01-20 09:15:01
【问题描述】：

我有一个文件，其中包含一个创建 axiosInstance 的函数，它曾经看起来像这样：

import Axios from 'axios';
import getToken from '@/api/auth-token';

const [apiUrl] = [window.variables.apiUrl];

export const createApiInstance = () => {
    return Axios.create({
        baseURL: `${apiUrl}`,
        headers: {
            Authorization: `Bearer ${getToken()}`,
        },
    });
};

我们想要实现的功能是在用户的 JWT 令牌过期时通知用户（这样他们就不会在所有请求都返回 401 时无意中继续使用该应用程序）。我的解决方案将此文件变成了这样：

import Axios from 'axios';
import getToken from '@/api/auth-token';
import store from '@/main.jsx';
import { userActionCreators } from '@/store/action-creators';

const [apiUrl] = [window.variables.apiUrl];

export const createApiInstance = (urlExtension = '') => {
    const axiosInstance = Axios.create({
        baseURL: `${apiUrl + urlExtension}`,
        headers: {
            Authorization: `Bearer ${getToken()}`,
        },
    });
    axiosInstance.interceptors.response.use(response => {
        if (response.status === 401)
            store.dispatch(userActionCreators.setUserTokenExpired());
        return response;
    });
    return axiosInstance;
};

这非常有效，因为现在正在检查来自 API 的所有响应的 401 Unauthorized 状态并分派一个操作，以便应用可以响应它。

Jest 不喜欢import store，所以当商店被导入这里时，应用程序中 95% 的测试都会失败。我确定这是商店的导入，因为每次测试都通过了评论。

我完全没有运气让任何东西工作。我尝试将设置jest 和babel-jest 更新为相同的版本，将react、react-dom 和react-test-renderer 设置为相同的版本。我已经研究过配置 moduleNameMapper 以在 package.json 的 jest 配置中模拟商店，但我不确定如何使其工作。我开始考虑采取一种完全不同的方法来解决这个问题，例如应用中间件来检查 401 响应，但我担心经过大量工作后我最终会遇到同样的问题。

在测试文件本身中模拟存储的问题在于，在这个大型应用程序中有数百个测试文件，所以除了向每个单独的文件添加模拟之外的任何东西都是我正在寻找的解决方案。

【问题讨论】：

标签： javascript reactjs redux jestjs enzyme

【解决方案1】：

确保你有一个 .babelrc 文件，否则 jest 不理解 babel 和 JSX 文件的上下文。 Related Stack Qusetion

如果这还不能解决问题，你可以用 main.jsx 代码更新并告诉我，然后我会更新

【讨论】：

嗨，我有一个看起来像这样的 .babelrc 文件 { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry" } ], "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties", ], } 我对 babelrc 文件还不太熟悉，但我认为这应该可以，如果您发现任何缺失或不正确的内容，请告诉我.

【解决方案2】：

如果其他人遇到此问题，这是因为我从与我的ReactDOM.render 相同的文件中导出了store。显然，您可以从此文件中导出，但是一旦您尝试导入导出到其他地方的内容，它就会捕获它并中断测试。解决方案是从不同的文件创建和导出store。

【讨论】：