Unit test: How to mock axios in react?

Question

I'm testing a axios inside the getArticlesFromDatabase.

Seems like I'm doing wrong, cause console shows following message:

(node:36919) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 5): here is reject fail:
(node:36919) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

How to fix it?

csrfData.js

import axios from 'axios';

var getArticlesFromDatabase = new Promise(function(resolve, reject) {
    axios.get('127.0.0.1:8000/api/articles/get-articles-list').then(response=>{
        resolve('herer is resolve success: ',response.data);
    }).catch(function (error) {
        reject('herer is reject fail: ',error);
    });
});

export {getArticlesFromDatabase};

csrfData.test.js

import React from 'react';
import {shallow, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import {expect} from 'chai';    
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

import {getArticlesFromDatabase} from '../components/common/csrfData';

configure({adapter: new Adapter()});

describe('csrfData', function () {

    it('csrfData ', function () {

        let mock = new MockAdapter(axios);
        const data = { response: true };
        mock.onGet('127.0.0.1:8000/api/articles/get-articles-list').reply(200, data);

        getArticlesFromDatabase.then(function(value) {    
            console.log('getArticlesFromDatabase:    ',value);
        });

    });

});

This would help you https://stackoverflow.com/questions/48172819/testing-dispatched-actions-in-redux-thunk-with-jest/48227479#48227479 — Shubham Khatri, Feb 07 '18 at 07:49
side track abit but related to this, I feel that unit testing on axios request is a bit too redundant. Unit tests are supposed to test the logic of a function. Your axios request does not transform data, neither have any other logic modification. Assuming your backend has already done unit test for the api, you really do not need to waste time to work on ur axios unit test. — tnkh, Mar 22 '21 at 02:26

score 3 · Accepted Answer · answered Feb 07 '18 at 07:40

There is a adapter plugin which helps in mocking the axios

https://github.com/ctimmerm/axios-mock-adapter

you can also refer my gist if you have generic method which returns the Axios Instance

https://gist.github.com/abhirathore2006/2bdc5e7e696e39e2cbf8b1800e33ecfc

score 0 · Answer 2 · answered Nov 08 '18 at 11:17

Even i struggled a lot for this. But eventually i got the solution.

Here it is:

    import { .. } from '../yourServices';
    jest.mock('axios');
    var axios = require('axios');
    //If you use get, post write as below, If you are using axios(config) dont need to mock below
    jest.mock('axios', () => ({ post: jest.fn(),create: jest.fn() }));

Then in your tests

    describe('Sample Test', () => {
        it('Should get - Test', async () => {

            const mockedResponse = Promise.resolve({
               Response data
            });

         //Make sure you mock the the functions at import (above) before using here.    
            //Post case
            axios.post.mockResolvedValue(mockedResponse);
           //Create Case
            axios.create.mockResolvedValue(mockedResponse);
           //get ....


           //If you use default axios(url, config) or axios(config)
            axios.mockResolvedValue(mockedResponse);

            //Your code
        });
});

Unit test: How to mock axios in react?

2 Answers2

Linked