Axios Mocking with ReactJS. Learn how to use the Axios Mocking… | by INDRAJITH | Nov, 2021

0
110
Axios Mocking with ReactJS. Learn how to use the Axios Mocking… | by INDRAJITH | Nov, 2021


When it comes to mocking Axios, it all starts with the Mock Adapter. It’s a different NPM library that provides the additional capabilities to Mock the API requests.

You can install it using the command npm install --save-dev axios-mock-adapter.

Then, you need to create an Axios instance and pass it to the Axio adapter.

import axios, { AxiosRequestConfig } from 'axios';
import AxiosMockAdapter from 'axios-mock-adapter';
const axiosMockInstance = axios.create();export const axiosMockAdapterInstance= new AxiosMockAdapter(axiosMockInstance, { delayResponse: 0 });export default axiosMockInstance;

You can see that I’ve exported both the Mock Adapter and Axios Mock instance in the above code. Each of them serves a different purpose.

  • Axios Mock Adapter Instance — This is used to define the Mock request handling code to define the Mock data.
  • Axios Mock Instance — This is used within React to invoke the API as a typical Axios instance.

Using the mock instance in React is straightforward. You don’t need to make any changes to the React code. The only thing is you have to import the correct instance in the component code.

But, if you use the above code snippet in a file name called libs/axios.ts you have to import the Axio instance from that file to invoke the API. So, as you can see, it creates a challenge, where you are locked to the Mock Instance.

To solve this problem, we can instantiate the Axio instance and return depending on environment variables. Moreover, it gives the option to switch between the two by simply changing a variable.

We can do that by modifying the above code snippet as follows.

import axios, { AxiosRequestConfig } from 'axios';
import AxiosMockAdapter from 'axios-mock-adapter';
const axiosMockInstance = axios.create();
const axiosLiveInstance = axios.create();
export const axiosMockAdapterInstance= new AxiosMockAdapter(axiosMockInstance, { delayResponse: 0 });export default process.env.isAxioMock? axiosMockInstance : axiosLiveInstance;

Now, we can import the above file and use it within React Components as usual.

Now, I’m getting into the most exciting part of the article to create our Mock files. The following example shows how we can create one e.g. _mock_/profile.ts

import { axiosMockAdapterInstance } from 'src/lib/axios';mock
.onGet('/api/social/publications')
.reply(() => {
const profile: Profile = {
id: '5e8891ab188cd28',
avatar: '/static/mock-images/avatars/jane.png',
bio: 'Product Designer',
email: '[email protected]',
name: 'Jane'
};
return [200, { profile }];

If you closely check the imported file here, we have imported the Axios Mock Adapter instance we created in the previous file and added the mocking code.

We could have added the mocking code in the instance creation code itself. But, it makes it less flexible to create mock mocks as the file grows with time.

However, this approach creates another problem since the application doesn’t directly import these mock files. So either you have to import them one by one or use a different approach to import them all.

I’ve used the latter approach to import them all from my index.tsx file in the React app.

import './__mocks__';

Note: This isn’t the best approach in terms of optimization, but I wanted to avoid the hassle of importing one by one, just for now.



Source link

Leave a reply

Please enter your comment!
Please enter your name here