"TypeError: mock.onGet is not a function" while mocking axios with axios-mock-adapter

Question

I'm trying a very basic test given in axios-mock-adapter homepage, but getting the above error. Any help is highly appreciated.

---

src/fakeAxios.spec.js:

var axios = require("axios");
var MockAdapter = require("axios-mock-adapter");

it("fakeAxios", async () => {
  var mock = new MockAdapter(axios);
  
  mock.onGet("/users").reply(200, {
    users: [{ id: 1, name: "John Smith" }],
  });
  
  axios.get("/users").then(function (response) {
    console.log(response.data);
  });

  mock.restore();
});

---

package.json:

{
  "name": "redux-app-v3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "test": "react-scripts test"
  },
  "jest": {
    "moduleNameMapper": {
      "axios": "axios/dist/node/axios.cjs"
    }
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.3",
    "axios": "^1.3.5",
    "moment": "^2.29.4",
    "react-scripts": "^5.0.1"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/eslint-parser": "^7.21.3",
    "@babel/preset-env": "^7.21.4",
    "@types/jest": "^29.5.0",
    "axios-mock-adapter": "^1.21.4",
    "babel-jest": "^29.5.0",
    "jest": "^27.5.1"
  }
}

error while running 'npm test':

PASS  src/math.spec.js
 FAIL  src/fakeAxios.spec.js
  ● fakeAxios

    **TypeError: mock.onGet is not a function**

       5 |   var mock = new MockAdapter(axios);
       6 |   
    >  7 |   mock.onGet("/users").reply(200, {
         |        ^
       8 |     users: [{ id: 1, name: "John Smith" }],
       9 |   });
      10 |   

      at Object.<anonymous> (src/fakeAxios.spec.js:7:8)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 2 passed, 3 total
Snapshots:   0 total
Time:        0.638 s, estimated 1 s
Ran all test suites related to changed files.

---

I tried this suggestion, but still getting the same error

jest.config.json:

{
  "transformIgnorePatterns": [
    "/node_modules/(?!axios)"
  ]
}

---

I also tried adding this config in package.json, again getting the same error: package.json:

...
  "jest": {
    "moduleNameMapper": {
      "axios": "axios/dist/node/axios.cjs"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!axios)"
    ]
  },
...

---

just for completion, this is math.spec.js, which is working fine:

const isEven = number => number % 2 === 0;

it("isEven", () => {
  const result = isEven(2);
  expect(result).toEqual(true);
});

it("isEven", () => {
  const result = isEven(1);
  expect(result).toEqual(false);
});

Answer 1

One way I got it to work was circumventing the Issue and not using axios-mock-adapter and just mocking the Request myself like this:

import axios from 'axios';

jest.mock('axios');
//This is only really needed for TypeScript - for JS you can just write axios.get.mockImplentation(...) below
const mockedAxios = axios as jest.Mocked<typeof axios>;

mockedAxios.get.mockImplementation((url) => {
    if (url === '/users') {
        return Promise.resolve({ data: {
            users: [{ id: 1, name: "John Smith" }]
        } })    
    }
});

This only mocks the get Requests, you can add more methods for post etc like mockedAxios.post.mockImplementation(...).
This basically overwrites the default axios behaviour with mocks and you should be able to implement this in your src/fakeAxios.spec.js

Answer 2

Finally, it turned out to be a simple fix

in package.json update test cmd as follows:

"scripts": {
  "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",
},

nothing else worked for me.

Also, removed "jest" section in package.json and deleted jest.config.json. Those changes are not needed.