reactjs - 使用 jest typescript 的 Axios 模拟类型

Question

我在一个类中有以下方法:

import axios from 'axios'

public async getData() {
   const resp = await axios.get(Endpoints.DATA.URL)
   return resp.data
}

然后我尝试设置一个 Jest 测试来执行此操作:

jest.mock('axios')

it('make api call to get data', () => {
   component.getData()
   expect(axios.get).toHaveBeenCalledWith(Endpoints.DATA.URL)
})

问题是，因为我没有模拟返回值，所以它给 resp.data 一个错误，因为我在 null 上调用 data 或 undefined 对象。我花了至少 2 个小时尝试各种方法来让它工作，但我找不到一种方法可以用一些返回值模拟 axios.get。

Jest 的文档使用 JavaScript，所以他们给出了这个例子 axios.get.mockResolvedValue(resp)但我无法调用 mockResolvedValue，因为 TypeScript 中的 axios.get 上不存在该方法。

此外，如果您知道除 Jest 之外的其他适用于 React 的优秀测试库可以轻松地为 TypeScript 完成这些工作，请随时分享。

Answer 1

文件开头:

import axios from 'axios';
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

现在你可以像往常一样使用它了:

mockedAxios.get.mockRejectedValue('Network error: Something went wrong');
mockedAxios.get.mockResolvedValue({ data: {} });