Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

467
Views
Mocking axios and interceptors with Jest returns mockImplemetation undefined

I have this axios implementation:

const api = axios.create({
    baseURL: process.env.REACT_APP_BACKEND_URL,
    headers: {
        "content-type": "application/json"
    },
    responseType: "json"
})

function createAxiosRequestInterceptor(axiosInstance) {
    axiosInstance.interceptors.request.use(
        config => {
            const accessToken = localStorage.getItem(REACT_FE_ACCESS_TOKEN)
            if (accessToken) {
                config.headers.common.Authorization = `Bearer ${accessToken}`
            }
            return config
        }
    )
}

function createAxiosResponseInterceptor(axiosInstance) {
    axiosInstance.interceptors.response.use(
        response => {
            return response;
        },
        error => {
            return Promise.reject(error)
        }
    )
}

This is my test:

import React from 'react'
import { Router } from 'react-router-dom'
import { cleanup, render, wait } from '@testing-library/react'
import { createMemoryHistory } from 'history'
import axios from 'axios'
import Dashboard from '../../pages/Dashboard'
import AuthRouter from '../../../AuthRouter'
import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';

function renderWithRouter(
  ui,
  {
    route = '/',
    history = createMemoryHistory({ initialEntries: [route] }),
  } = {}
) {
    const middlewares = [thunk];
  const mockStore = configureMockStore(middlewares);

  const store = mockStore();
  return {
    ...render(<Router history={history}><AuthRouter type="private" store={store}>{ui}</AuthRouter></Router>),
    history,
  }
}

afterEach(cleanup)

jest.mock('axios', () => {
  return {
    create: () => {
      return {
        interceptors: {
          request: {eject: jest.fn(), use: jest.fn()},
          response: {eject: jest.fn(), use: jest.fn()},
        },
      };
    },
  };
});

describe('when unauthenticated', () => {

    axios.get.mockImplementation(() => Promise.resolve({ data: {error: 'user or password wrong'} }));
  
    const props = {
      isAuthenticated: false,
    }
  
    it('redirects when authToken invalid', async () => {
      const { history } = renderWithRouter(<Dashboard {...props} />)
      expect(history.location.pathname).toEqual('/')

    })
  })

I get: TypeError: Cannot read property 'mockImplementation' of undefined

If I change the mock implementation of axios as following:

jest.mock('axios')

I get TypeError: Cannot read property 'interceptors' of undefined

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Did you try to mock like this?

const mockAxios = {
   interceptors: {
      request: {eject: jest.fn(), use: jest.fn()},
      response: {eject: jest.fn(), use: jest.fn()},
   },
};

jest.mock('axios', () => {
  return {
    create: () => {
      return mockAxios;
    },
  };
});

And in the test:

mockAxios.get = jest.fn(() => Promise.resolve({ data: {error: 'user or password wrong'} }));
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!