Mock axios with axios-mock-adapter get undefined resp

Question

I created an axios instance ...

// api/index.js

const api = axios.create({
  baseURL: '/api/',
  timeout: 2500,
  headers: { Accept: 'application/json' },
});
export default api;

And severals modules use it ..

// api/versions.js

import api from './api';

export function getVersions() {
  return api.get('/versions');
}

I try to test like ..

// Test
import { getVersions } from './api/versions';

const versions= [{ id: 1, desc: 'v1' }, { id: 2, desc: 'v2' }];
mockAdapter.onGet('/versions').reply(200, versions);

getVersions.then((resp) => { // resp is UNDEFINED?
  expect(resp.data).toEqual(versions);
  done();
});

Why resp is undefined?

score 5 · Answer 1 · answered Jun 02 '17 at 04:33

5

Two things to try here:

Maybe you already have this elsewhere in your code, but be sure to set up mockAdaptor:

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const mockAdapter = new MockAdapter(axios);

I haven't found a way to get the mock adapter working when the function you are testing uses 'axios.create' to set up a new axios instance. Try something along the lines of this instead:

// api/index.js

const api = {
  get(path) {
    return axios.get('/api' + path)
    .then((response) => {
        return response.data;
    });
  }
}
export default api;

answered Jun 02 '17 at 04:33

James M

173
6

#1. I already set up this. #2. Just use `new MockAdapter(axiosInstanceHere);` no need to do that. – ridermansb Jun 02 '17 at 04:38
using ```new MockAdapter(axios.create({timeout: 5000}))``` does not work. – sjt003 Aug 28 '17 at 17:57
I am having the same problem. When created the connection with `axios.create` the mock adapter returns undefined. – DaKaZ Aug 30 '17 at 17:34
thanks a lot you put me on track... I updated the api.index.js, not using anymore axios.create ! I'll update my question with the right coding following your recommendation – Sep 12 '17 at 07:15
thanks a lot you put me on track... I updated the api.index.js, not using anymore axios.create ! I'll update my question with the right coding following your recommendation – Sep 12 '17 at 07:15

score 2 · Answer 2 · answered Jul 26 '21 at 14:25

For anyone still struggling with this.

You need to make sure you iniatilise your MockAdapter outside a test body.

ie. ❌ Incorrect ❌

it('should do a thing', () => {
    const mockAdapter = new MockAdapter(axios);
})

✅ Correct ✅

const mockAdapter = new MockAdapter(axios);

it('should pass' () => {})

score 0 · Answer 3 · answered Apr 07 '23 at 01:51

This is because you have not created a new instance of new MockAdapter

import { getVersions } from "./api/versions";
import api from "./api/index";

describe("getVersions", () => {
  const versions = [
    { id: 1, desc: "v1" },
    { id: 2, desc: "v2" },
  ];

  const mockClient = new MockAdapter(api);

  it("should return status 200 and data === versions", async () => {
    mockClient.onGet("/versions").reply(200, versions);
    
    const result = await getVersions();

    expect(result.status).toBe(200);
    expect(result.data).toEqual(versions);
  });
});

Attention!!! It is important in your case to create a new MockAdapter(api) using the api. If you create a MockAdapter(axios) will not work, this is a very common error. Because you are not using axios directly, but creating a new instance of axios

// api/index.js

const api = axios.create({
  baseURL: '/api/',
  timeout: 2500,
  headers: { Accept: 'application/json' },
});
export default api;

score -1 · Answer 4 · answered Sep 12 '17 at 07:18

according to James M. advice, I updated my api/index.js , not using the axios.create...

api/index.js

import http from 'axios'

export default {

  fetchShoppingLists: () => {
    console.log('API FETCH SHOPPINGLISTS')
    return http
      .get('http://localhost:3000/shoppinglists')
      .then(response => {
        return response
      })
      .catch(error => {
        console.log('FETCH ERROR: ', error)
      })
  }
}

kyw · Accepted Answer · 2021-12-10T14:23:01.487

-4

You don't need axios-mock-adapter. Here is how I mock my axios:

// src/__mocks__/axios.ts

const mockAxios = jest.genMockFromModule('axios')

// this is the key to fix the axios.create() undefined error!
mockAxios.create = jest.fn(() => mockAxios)

export default mockAxios

edited Dec 10 '21 at 14:23

answered Jul 19 '18 at 04:11

kyw

6,685
8
47
59

Mock axios with axios-mock-adapter get undefined resp

5 Answers5