CODEWITHSUNDEEP
javascriptreactjsreact-reduxaxiosaxios-mock-adapter
arioamri
arioamri

Reputation: 35

axios get 404 because axios mock adapter

I bought Metronic React template with axios-mock-adapter inside. I still need mock request for Authentication, but when I use Axios to fetch public API with Axios.get() returned 404 or undefined (see my redux modules below).

redux modules

import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
import { API_URL } from "../../support/api";

const initialState = {
  listLoading: false,
  actionsLoading: false,
  totalCount: 0,
  entities: null,
  equipmentForEdit: undefined,
  error: null,
};

const { actions, reducer } = createSlice({
  name: "ref_equipment",
  initialState,
  reducers: {
    startCall: (state) => {
      state.error = null;
      state.listLoading = true;
    },
    allReffEquipmentFetched: (state, action) => {
      state.listLoading = false;
      state.error = null;
      state.entities = action.payload;
    },
    catchError: (state, action) => {
      state.error = action.payload;
    },
  },
});

export default reducer;

export const {
  startCall,
  allReffEquipmentFetched,
  catchError,
} = actions;

export const fetchAllReffEquipment = () => async (dispatch) => {
  dispatch(actions.startCall());
  try {
    const response = await axios.get(`${API_URL}/public`); 
    console.log(response);
    // this console.log never never showed up when I call this function
    // note: this API_URL is correct
  } catch (err) {
    console.log(err);
    // get error 404
    window.alert(`Something went wrong. ${err}`);
    dispatch(catchError(err));
  }
};

root index.js

import axios from "axios";
import * as _redux from "./redux";
import store, { persistor } from "./redux/store";
import App from "./app/App";

_redux.mockAxios(axios);
// if I comment this line, my pubilc API call fetched, but Authentication doesnt work

_redux.setupAxios(axios, store);

ReactDOM.render(
  <MetronicI18nProvider>
    <MetronicLayoutProvider>
      <MetronicSubheaderProvider>
        <MetronicSplashScreenProvider>
          <App store={store} persistor={persistor} basename={PUBLIC_URL} />
        </MetronicSplashScreenProvider>
      </MetronicSubheaderProvider>
    </MetronicLayoutProvider>
  </MetronicI18nProvider>,
  document.getElementById("root")
);

mockAxios.js

import MockAdapter from "axios-mock-adapter";
import mockAuth from "../../app/modules/Auth/__mocks__/mockAuth";

export default function mockAxios(axios) {
  const mock = new MockAdapter(axios, { delayResponse: 300 });
  // if this line commented, fetch public API from redux running well but authentication doesn't

  mockAuth(mock);

  return mock;
}

How can I use both (mock request & real request). Thank you

Upvotes: 2

Views: 3008

Answers (1)

Amit
Amit

Reputation: 2725

You are using 'axios' from library directly and then making a get call. It actually makes a call to that URL.

Create an Axios instance as shown below, then use this exported axios instance within the mock adapter, it will work.

export const axiosInstance = axios.create({
  baseURL: API_URL,
});

const mock = new MockAdapter(axiosInstance, { delayResponse: 300 });

Upvotes: 1

Related Questions