如何使用 jest 测试 axios 拦截器？答案

【问题标题】：How to test axios interceptors using jest?如何使用 jest 测试 axios 拦截器？
【发布时间】：2019-04-28 08:52:14
【问题描述】：

我正在尝试测试以下代码：

import axios from 'axios';
import { history } from './ReduxService';

axios.interceptors.response.use(response => response,
    (error) => {
        if ((error.response && error.response.status === 408) || error.code === 'ECONNABORTED') {
            history.push('/error');
        }
        return Promise.reject(error);
    }
);

关于如何覆盖它的任何建议？

【问题讨论】：

标签： axios jestjs interceptor

【解决方案1】：

首先，修改代码，让你可以在里面传递一个模拟版本的axios：

import axios, { AxiosInstance } from 'axios';
import { history } from './ReduxService';

export const addResponseInterceptor(client: AxiosInstance) => { 
    client.interceptors.response.use(response => response,
    (error) => {
        if ((error.response && error.response.status === 408) || error.code === 
        'ECONNABORTED') {
            history.push('/error');
        }
        return Promise.reject(error);
    });
};

然后像这样设置你的测试：

import { addResponseInterceptor } from './yourInterceptorFile'
import axios from 'axios';
jest.mock('axios', () => {
     return {
         create: jest.fn(),
         interceptors: {
             request: {
                 use: jest.fn(),
                 eject: jest.fn(),
             },
             response: {
                 use: jest.fn(),
                 eject: jest.fn(),
             },
         }
     };
});

describe('addResponseInterceptor tests', () => {
    
    beforeEach(() => {
        (axios.create as jest.Mock).mockReset();
        (axios.interceptors.request.use as jest.Mock).mockReset();
        (axios.interceptors.request.eject as jest.Mock).mockReset();
        (axios.interceptors.response.use as jest.Mock).mockReset();
        (axios.interceptors.response.eject as jest.Mock).mockReset();
    });
    it('should add a response interceptor to the axios instance', () => {
        addResponseInterceptor(axios);
        expect(axios.interceptors.response.use).toHaveBeenCalled();
    });
    it('should push to history when an error occurs', async() => {
        const historySpy = jest.spyOn(history, 'push');
        const axiosClient = axios;
        addResponseInterceptor(axios);
        const interceptorErrorHandler = (axiosClient.interceptors.response.use as jest.Mock).mock.calls[0][1];
        try {
            await interceptorErrorHandler({
                response: {
                    status: 408
                }
            });
            //this should not be called--the promise should be rejected
            expect(true).toBe(false);
         } catch {
            expect(historySpy).toHaveBeenCalledWith('/error');
         }
    });
    . . .
});

【讨论】：