Javascript ReactJS-导入存储中断笑话

我有一个文件，其中有一个函数可以创建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令牌过期时通知用户（这样他们就不会在所有请求都返回401s时无意中继续使用应用程序）。我的解决方案将此文件转换为：

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未授权状态，并发送一个操作，以便应用程序能够响应它

Jest不喜欢导入存储，因此在这里导入存储时，应用程序中95%的测试失败。我确信这是存储的导入，因为每次测试都是在注释它时通过的

我完全没有运气得到任何工作。 我已尝试将设置

jest

和

babel jest

更新为相同版本，将

react

、

react dom

和

react test renderer

设置为相同版本。我已经研究过如何在

package.json

中配置moduleNameMapper来模拟jest配置中的存储，但我不确定如何使其工作。我开始考虑采取完全不同的方法来解决这个问题，比如应用中间件来检查401个响应，但是我担心在一系列工作之后，我会遇到同样的问题。

---

在测试文件中模拟存储的问题在于，在这个大型应用程序中有数百个测试文件，因此除了在每个文件中添加模拟之外，我正在寻找解决方案。

确保您有一个.babelrc文件，另外，jest不理解babel和JSX文件的上下文

---

如果这还不够，你能用main.jsx代码更新并告诉我，然后我会更新如果其他人有这个问题，这是因为我从与我的

ReactDOM.render相同的文件导出
存储
。显然，您可以从此文件导出，但一旦尝试导入导出到其他地方的内容，它将捕获该文件并中断测试。解决方案是从另一个文件创建和导出
存储区
。
嗨，我有一个.babelrc文件，它看起来像
{“预设”：[[“@babel/preset env”，“useBuiltIns”：“entry”}]，“@babel/preset react”]，“plugins”：[“@babel/plugin提案类属性”，]，}
我还不太熟悉babelrc文件，但我认为这应该可以，如果您发现任何遗漏或错误，请告诉我。