如何使用 axios.create 函數在 React 中模擬 axios

Question

我正在研究 React 項目，在該項目中我將 axios 用於 http 請求。 我有一個帶有 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);
    });
});

不幸的是，我收到了這樣的錯誤：

這是為什么？ 在這種情況下，如何正確創建 facke API 響應？ 我將不勝感激。

Answer 1

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

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