Axios mock adapter giving error 'Error: Request failed with status code 404'

Question

I have a component in which I am making an API call on mount

import * as React from 'react';
import axios from 'axios';
import './index.scss';
// import {axiosInstance} from '../../mocks/index';

// axios(client)
// axiosInstance(axios);
const FeatureTable = () => {
   React.useEffect(() => {
    axios.get("http://localhost:8080/users").then(function (response: any) {
      console.log(response.data);
    });
  }, []);

  return (
    <div className="container">
  </div>
  )
}

export default FeatureTable;

And I have setup my mock adapter in a different folder like this

const Axios = require("axios");
const MockAdapter = require("axios-mock-adapter");
import featureTable from './table';

export const axiosInstance = Axios.create();
const mock = new MockAdapter(axiosInstance, { delayResponse: 1000,  onNoMatch: "throwException"  });

featureTable(mock);

In my table file, I have this code -

const users = [{ id: 1, name: "John Smith" }];


const featureTable = (mock: any) => {
  mock.onGet("http://localhost:8080/users").reply(200, users);
}

export default featureTable;

Upon running the code, I get 404 error not found. Please help with the fix.

score 5 · Accepted Answer · answered Mar 29 '21 at 10:59

First of all: you have to use the same axios instance with both places: to setup the mock response and to make the actual call. When I want to mock some API I usually create and export the axios instance in a separate file, and just import it where I need it. like so:

// dataAPI.js
import axios from 'axios';

export const dataAPI = axios.create(); // general settings like baseURL can be set here

// FeatureTable.js
import React, { useEffect } from 'react';
import { dataAPI } from './dataAPI';

export const FeatureTable = () => {
  useEffect(() => {
    dataAPI.get('http://localhost:8080/users').then(something);
  }, []);

  return (<div>something</div>);
};

// mock.js
import { dataAPI } from './dataAPI';
import MockAdapter from 'axios-mock-adapter';
import { users } from './mockData.js'

const mock = new MockAdapter(dataAPI);
mock.onGet('http://localhost:8080/users').reply(200, users);

I want to point out axios-response-mock as an alternative to axios-mock-adapter. Disclaimer: I'm the author of that library. I was a bit frustrated by mock-adapter because I didn't find the API intuitive and it has limitations (e.g. can't match URL params in conjunction with POST requests) and that it would not let unmatched requests pass-through by default.

score 0 · Answer 2 · answered Mar 29 '21 at 09:30

0

In your table file, you have to pass the relative path, not the absolute one.

const users = [{ id: 1, name: "John Smith" }];


const featureTable = (mock: any) => {
  mock.onGet("/users").reply(200, users);
}

export default featureTable;

answered Mar 29 '21 at 09:30

Sangam Rajpara

652
3
12

With relative path too, it gives the same error – Aayushi Mar 29 '21 at 09:48
I think you have to use the same Axios instance that you wrapped around `mockAdapter`! – Sangam Rajpara Mar 29 '21 at 09:57
Looks like you have already tried that also! Just saw commented code – Sangam Rajpara Mar 29 '21 at 09:59
Where you have imported file that initiates `mockAdapter`. – Sangam Rajpara Mar 29 '21 at 10:02

Axios mock adapter giving error 'Error: Request failed with status code 404'

2 Answers2