使用 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 或undefined 对象上调用data。我花了至少 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: {} });

Answer 2

如果您想将jest.mock 与"no-any" 一起使用，请尝试以下操作：

import axios, { AxiosStatic } from 'axios'

interface AxiosMock extends AxiosStatic {
  mockResolvedValue: Function
  mockRejectedValue: Function
}

jest.mock('axios')
const mockAxios = axios as AxiosMock

it('make api call to get data', () => {
   // call this first
   mockAxios.mockResolvedValue(yourValue)

   component.getData()
   expect(mockAxios.get).toHaveBeenCalledWith(Endpoints.DATA.URL)
})

Answer 3

这是我个人经常使用的。

import axios from 'axios';
jest.mock('axios')

it('...', () => {
  (axios.get as jest.Mock).mockImplementationOnce(() => Promise.resolve({}));
  // test here
  expect(axios.get).toHaveBeenCalled()
}

Answer 4

但我不能调用 mockResolvedValue，因为 TypeScript 中的 axios.get 上不存在该方法

你可以使用断言：

(axios.get as any).mockResolvedValue(resp)

Answer 5

我一直遇到is not a function 问题。如果接受的答案对您不起作用，请尝试使用大写字母 A 导入 axios 即。 Axios.

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

Answer 6

我使用sinon 库npm install sinon @types/sinon --save-dev 找到了一个简洁的解决方案。

那么测试代码就变成了：

let component: Component
let axiosStub: SinonStub

beforeAll(() => {
    component = new Component({})
    axiosStub = sinon.stub(axios, 'get')
})

afterAll(() => {
    axiosStub.restore()
})

it('make api call to get data', async () => {
    // set up behavior
    axiosStub.withArgs(Endpoints.DATA.URL).returns({data: []})

    // method under test
    const res = await component.getData()

    // assertions
    expect(res).toEqual([])
})

Answer 7

另一种选择是使用jest.spyOn：

import axios from "axios";

jest.spyOn(axios, "get").mockImplementation(() => Promise.resolve({data: []}));

这还为您提供了可以测试的模拟方法的好处，例如：

import axios from "axios";

// ...

const mockedGet = jest
  .spyOn(axios, "get")
  .mockImplementation(() => Promise.resolve({data: []}));

// ...

expect(mockedGet).toBeCalledWith('https://example.api?q=abc&k=123');

Answer 8

从 Jest 24.9.0 开始，这是正确输入 axios 和 Jest 属性的方式。

我们希望类型化的模拟是模拟对象类型包含模拟对象类型和 Jest 模拟类型的联合。据我所知，目前的答案都不能做到这一点。

jest.MockedFunction

jest.MockedClass

import axios from 'axios';
jest.mock('axios');

const mockedAxios = axios as jest.MockedFunction<typeof axios>;

mockedAxios.mockResolvedValue({ status: 200, data: 'mockResponse' });

// Or:
(mockedAxios.get as jest.MockedFunction<typeof mockedAxios.get>).mockResolvedValue('mockResponse');

如您所见，您可以手动转换您需要的内容，或者您​​需要一些东西来遍历所有 axios 属性/方法来键入所有内容。

为此（深度模拟类型），您可以使用 Jest 中引入的 jest.mocked() 27.4.0

import axios from 'axios';
jest.mock('axios');

const mockedAxios = jest.mocked(axios, true); 

mockedAxios.mockImplementation() // correctly typed
mockedAxios.get.mockImplementation() // also correctly typed