I have some tests in one file,

I check my reducer with some case

My code looks like this

my code

import axiosInstance from '~/utils/network';
const fetcher = axiosInstance();


const fetchMiddleware = () => {
  switch (type) {

     case 'LOGOUT':{
      try {
          await fetcher.get(API.GET.LOGOUT_OPERATION);

          dispatch({ type: 'LOGOUT_SUCCESS' });
        } catch (err) {
          dispatch({ type: 'LOGOUT_FAIL' });
        }
      });
     }
   }
}

my test

import axiosInstance from '../../src/utils/network';

import configureStore from 'redux-mock-store';

const middlewares = [fetchMiddleware, thunk];
const mockStore = configureStore(middlewares);
const store = mockStore(getInitialReducerState());


jest.mock('../../src/utils/network', () => {
  const axiosInstance = jest.fn().mockImplementation(() => {
    return {
      get: jest.fn().mockImplementation(() => {
        return {
          headers: {},
        };
      }),
    };
  }) as any;
  axiosInstance.configure = jest.fn();
  return axiosInstance;
});


describe('test LOGOUT', () => {
  beforeEach(() => {
    store.clearActions();
  });

  it('should test be success', async () => {
    await store.dispatch({
      type: 'LOGOUT',
      payload: { userName: 'testUserName' },
    });

    expect(store.getActions()).toContainEqual({
      type: 'LOGOUT_SUCCESS',
    });
  });

  it('should test be fail', async () => {
    (axiosInstance as jest.Mock).mockImplementation(() => {
      return {
        get: jest.fn().mockImplementation(() => {
          throw new Error(' ');
        }),
      };
    });
    await store.dispatch({
      type: 'LOGOUT',
      payload: { userName: 'testUserName' },
    });

    expect(store.getActions()).toContainEqual({
      type: 'LOGOUT_FAIL',
    });
  });
});

I want to test two scenarios: success & fail,

I mock the axiosInstance function.

But even I override the mock in the second test I get the first mock because my code loads axiosInstance only once.

what can I do?

CodePudding user response：

You need to use jest.isolateModules

Let's say we have 2 files:

1. ./lib.js - this is your ~/utils/network
2. ./repro.js - this is your file with the code under test

./lib.js:

export default function lib() {
  return () => 10;
}

./repro.js:

import lib from './lib';
const fnInstance = lib();

export const fn = () => {
  return fnInstance();
};

And the ./repro.test.js:

function getRepro(libMock) {
  let repro;

  // Must use isolateModules because we need to require a new module everytime
  jest.isolateModules(() => {
    jest.mock('./lib', () => {
      return {
        default: libMock,
      };
    });

    repro = require('./repro');
  });

  // If for some reason in the future the behavior will change and this assertion will fail
  // We can do a workaround by returning a Promise and the `resolve` callback will be called with the Component in the `isolateModules` function
  // Or we can also put the whole test function inside the `isolateModules` (less preferred)
  expect(repro).toBeDefined();

  return repro;
}

describe('', () => {
  it('should return 1', () => {
    const { fn } = getRepro(function lib() {
      return () => 1
    });
    expect(fn()).toEqual(1);
  });

  it('should return 2', () => {
    const { fn } = getRepro(function lib() {
      return () => 2
    });

    expect(fn()).toEqual(2);
  });
});

CodePudding user response：

It's preferable to use existing library to mock Axios, it saves from boilerplate code and potential mistakes in mock implementation; moxios has been already suggested.

It's inconvenient to mock axiosInstance per test because it has been already called on the import of tested module, so this requires it to be re-imported per test; another answer explains how it's done with jest.isolateModules.

Since axiosInstance is evaluated only once and is supposed to return mocked object, it's convenient to mock it once per test and then change implementations:

jest.mock('~/utils/network', () => {
  const axiosMock = { get: jest.fn(), ... };
  return {
    axiosInstance: () => axiosMock;
  };
});

const axiosMock = axiosInstance();

...

(axiosMock.get axiosInstance as jest.Mock).mockImplementation(() => {
  throw new Error(' ');
});

await store.dispatch(...);

This requires to use jest.restoreAllMocks in beforeEach or similar Jest configuration option to avoid test cross-contamination.

Notice that Axios doesn't throw errors but rather return rejected promises, this may affect test results, see the note regarding the benefits of libraries.