单元测试：如何在反应中模拟 axios？

Posted 2023-02-22

【中文标题】单元测试：如何在反应中模拟 axios？

【英文标题】：Unit test: How to mock axios in react?

【发布时间】：2018-07-17 09:58:13

【问题描述】：

我正在 getArticlesFromDatabase 中测试 axios。

好像我做错了，导致控制台显示以下消息：

(node:36919) UnhandledPromiseRejectionWarning: 未处理的承诺 拒绝（拒绝 id：5）：这是拒绝失败： （节点：36919） DeprecationWarning：不推荐使用未处理的承诺拒绝。在 未来，未处理的承诺拒绝将终止 具有非零退出代码的 Node.js 进程。

如何解决？

---

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);
        );

    );

);

【问题讨论】：

这会帮助你***.com/questions/48172819/…

旁道升技，但与此相关，我觉得对axios请求的单元测试有点太多余了。单元测试应该测试函数的逻辑。您的 axios 请求不会转换数据，也没有任何其他逻辑修改。假设你的后端已经对 api 进行了单元测试，你真的不需要浪费时间去进行你的 axios 单元测试。

【参考方案1】：

即使我为此付出了很多努力。但最终我得到了解决方案。

这里是：

    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() ));

然后在你的测试中

    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
        );
);

【参考方案2】：

有一个适配器插件可以帮助模拟 axios

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

如果你有返回 Axios 实例的通用方法，你也可以参考我的要点

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