reactjs - 如何使用 axios.create 函数在 React 中模拟 axios

Question

我正在使用 axios 处理 http 请求的 React 项目。我有一个带有 axios 配置的单独文件，如下所示：

import axios from 'axios'

export default axios.create({
    baseURL: " http://localhost:3001",
    params: {
    }
})

我在行动中使用这个 thunk 创建者，如下所示：

import streams from "../apis/streams";
export const fetchStreams = () => {
    return async(dispatch: ThunkDispatch<void, State, Action>)  => {
        const response: AxiosResponse<Stream[]> = await streams.get<Stream[]>('/streams');
        dispatch({type: ActionType.FETCH_STREAMS, payload: response.data});
    }
} 

首先，我创建了“src/__mocks__/axios.ts”文件，例如：

const mockedAxios: any = jest.createMockFromModule('axios');

mockedAxios.create = jest.fn(() => mockedAxios);

export default mockedAxios; 

然后我写了如下测试：

import mockedAxios, {AxiosResponse} from "axios";
import streamsApi from '../apis/streams'
import expectedStreams from "../mocks/expectedStreams";
jest.mock('axios')

describe('fetchStreams action', () => {

    it('Store is updated correctly', async () => {
        const mockedResponse: AxiosResponse = {
            data: expectedStreams,
            status: 200,
            statusText: 'OK',
            headers: {},
            config: {}
        }
        mockedAxios.get.mockImplementationOnce(() => {
            Promise.resolve(mockedResponse);
        })
        const results = await streamsApi.get('/streams');
        expect(results.data).toBe(mockedResponse.data);
    });
});

不幸的是，我收到了这样的错误：

这是为什么？在这种情况下，如何正确创建 fake API 响应？我将不胜感激。

标签： reactjstypescriptunit-testingaxiosjestjs

Answer 1

好的，我知道出了什么问题。我忘记在 Promise 之前添加 return ，如下所示：

mockedAxios.get.mockImplementationOnce(() => {
            return Promise.resolve(mockedResponse);
        })