ReactJS-导入存储中断开玩笑

Question

我有一个带有一个函数的文件，该函数创建一个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未经授权状态，并分派操作，以便应用可以对其进行响应。

Jest不喜欢import store，因此将商店导入此处时，应用程序中的95％测试失败。我敢肯定这是商店的导入，因为每个测试都在评论时通过。

我绝对没有运气可以工作。我尝试将jest和babel-jest设置更新为相同的版本，将react，react-dom和react-test-renderer设置为相同的版本。我已经研究过配置moduleNameMapper来模拟package.json中jest配置中的存储，但是我不确定如何使它工作。我开始考虑采用完全不同的方法来解决此问题，例如应用中间件来检查401响应，但我担心经过大量工作最终会遇到相同的问题。

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

Answer 1

请确保您具有.babelrc文件，否则，开玩笑就无法理解babel和JSX文件的上下文。 Related Stack Qusetion

如果不能完全解决问题，您可以使用main.jsx代码进行更新，然后告诉我，我将进行更新