ReactJS - Importing store breaks Jest

Question

I had a file with one function that creates an axiosInstance, it used to look like this:

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()}`,
        },
    });
};

Something we wanted to implement was notifying the user when their JWT token expires (so they won't unwittingly continue using the app while all of their requests are returning 401s). My solution turned this file into this:

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;
};

This worked very well, as now all of the responses from the API are being checked for a 401 Unauthorized status and dispatching an action so the app can respond to it.

Jest doesn't like the import store, so 95% of the tests in the app fail when the store is imported here. I'm certain it is the importing of the store because every test passes when it is commented it.

I've had absolutely no luck getting anything to work. I've tried updating setting jest and babel-jest to the same versions, setting react, react-dom, and react-test-renderer to the same versions. I've looked into configuring moduleNameMapper to mock the store in the jest config in package.json but I'm not sure how to make that work. I'm starting to consider taking a completely different approach to this problem such as applying middleware to check for 401 responses instead, but I'm worried I'll end up running into the same issue after a bunch of work.

The problem with mocking the store in the test files themselves is that there's hundreds of test files in this large application, so literally anything besides adding mocking to each individual file is the solution I'm looking for.

score 1 · Accepted Answer · answered Jan 29 '20 at 17:12

If anyone else is having this problem, this occurred because I was exporting the store from the same file as my ReactDOM.render. Apparently you can export from this file but as soon as you try to import what is exported somewhere else it will catch it and break tests. The solution is to create and export the store from a different file.

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Make sure you have a .babelrc file, as jest doesn't understand the context of babel and JSX files otherwise. Related Stack Qusetion

If that doesn't quite do the trick can you update with the main.jsx code and let me know then i'll update

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 19 '19 at 23:45

theFlyingCoder

109
5

Hi, I have a .babelrc file that looks like this `{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry" } ], "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties", ], } ` I'm not too familiar with babelrc files yet but I think this should work, let me know if you notice anything missing or incorrect. – Jeremy Dahms Jan 06 '20 at 16:16

ReactJS - Importing store breaks Jest

2 Answers2