Typescript 和 Jest：避免模拟函数上的类型错误

Question

当想用 Jest 模拟外部模块时，我们可以使用 jest.mock() 方法在模块上自动模拟函数。

然后我们可以随意操作和询问模拟模块上的模拟函数。

例如，考虑以下模拟 axios 模块的人为示例：

import myModuleThatCallsAxios from '../myModule';
import axios from 'axios';

jest.mock('axios');

it('Calls the GET method as expected', async () => {
  const expectedResult: string = 'result';

  axios.get.mockReturnValueOnce({ data: expectedResult });
  const result = await myModuleThatCallsAxios.makeGetRequest();

  expect(axios.get).toHaveBeenCalled();
  expect(result).toBe(expectedResult);
});

以上在 Jest 中运行良好，但会抛出 Typescript 错误：

类型 '(url: 字符串，配置？：AxiosRequestConfig | undefined) => AxiosPromise'.

axios.get 的 typedef 正确地不包括 mockReturnValueOnce 属性。我们可以通过将 axios.get 包装为 Object(axios.get) 来强制 Typescript 将其视为 Object 字面量，但是：

在保持类型安全的同时模拟函数的惯用方法是什么？

Answer 1

请使用ts-jest中的mocked函数

mocked 测试助手根据其源代码的类型为您的模拟模块甚至它们的深层方法提供类型。它利用了最新的 TypeScript 功能，因此您甚至可以在 IDE 中完成参数类型（与 jest.MockInstance 不同）。

import myModuleThatCallsAxios from '../myModule';
import axios from 'axios';
import { mocked } from 'ts-jest/utils'

jest.mock('axios');

// OPTION - 1
const mockedAxios = mocked(axios, true)
// your original `it` block
it('Calls the GET method as expected', async () => {
  const expectedResult: string = 'result';

  mockedAxios.mockReturnValueOnce({ data: expectedResult });
  const result = await myModuleThatCallsAxios.makeGetRequest();

  expect(mockedAxios.get).toHaveBeenCalled();
  expect(result).toBe(expectedResult);
});

// OPTION - 2
// wrap axios in mocked at the place you use
it('Calls the GET method as expected', async () => {
  const expectedResult: string = 'result';

  mocked(axios).get.mockReturnValueOnce({ data: expectedResult });
  const result = await myModuleThatCallsAxios.makeGetRequest();

  // notice how axios is wrapped in `mocked` call
  expect(mocked(axios).get).toHaveBeenCalled();
  expect(result).toBe(expectedResult);
});

我无法强调 mocked 有多棒，再也不用进行类型转换了。

Answer 2

更新到最新的 Axios (0.21.1) 后，我开始遇到这种问题。我尝试了很多解决方案，但没有结果。

我的解决方法：

type axiosTestResponse = (T: unknown) => Promise<typeof T>;

...

it('some example', async () => {
  const axiosObject = {
    data: { items: [] },
    status: 200,
    statusText: 'ok',
    headers: '',
    config: {},
  } as AxiosResponse;

  (Axios.get as axiosTestResponse) = () => Promise.resolve(axiosObject);
});

Answer 3

@hutabalian 当您使用axios.get 或axios.post 时，该代码运行良好，但如果您使用config 请求以下代码：

const expectedResult: string = 'result';
const mockedAxios = axios as jest.Mocked<typeof axios>;
mockedAxios.mockReturnValueOnce({ data: expectedResult });

会导致这个错误：

TS2339 (TS) 属性“mockReturnValueOnce”在类型上不存在 '嘲笑'。

你可以这样解决它：

AxiosRequest.test.tsx

import axios from 'axios';
import { MediaByIdentifier } from '../api/mediaController';

jest.mock('axios', () => jest.fn());

test('Test AxiosRequest',async () => {
    const mRes = { status: 200, data: 'fake data' };
    (axios as unknown as jest.Mock).mockResolvedValueOnce(mRes);
    const mock = await MediaByIdentifier('Test');
    expect(mock).toEqual(mRes);
    expect(axios).toHaveBeenCalledTimes(1);
});

mediaController.ts：

import { sendRequest } from './request'
import { AxiosPromise } from 'axios'
import { MediaDto } from './../model/typegen/mediaDto';

const path = '/api/media/'

export const MediaByIdentifier = (identifier: string): AxiosPromise<MediaDto> => {
    return sendRequest(path + 'MediaByIdentifier?identifier=' + identifier, 'get');
}

request.ts:

import axios, { AxiosPromise, AxiosRequestConfig, Method } from 'axios';

const getConfig = (url: string, method: Method, params?: any, data?: any) => {
     const config: AxiosRequestConfig = {
         url: url,
         method: method,
         responseType: 'json',
         params: params,
         data: data,
         headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json' },
    }
    return config;
}

export const sendRequest = (url: string, method: Method, params?: any, data?: any): AxiosPromise<any> => {
    return axios(getConfig(url, method, params, data))
}

Answer 4

添加这行代码const mockedAxios = axios as jest.Mocked<typeof axios>。然后使用 mockedAxios 调用 mockReturnValueOnce。 使用您的代码，应该这样做：

import myModuleThatCallsAxios from '../myModule';
import axios from 'axios';

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

it('Calls the GET method as expected', async () => {
  const expectedResult: string = 'result';

  mockedAxios.get.mockReturnValueOnce({ data: expectedResult });
  const result = await myModuleThatCallsAxios.makeGetRequest();

  expect(mockedAxios.get).toHaveBeenCalled();
  expect(result).toBe(expectedResult);
});

Answer 5

要在保持类型安全的同时惯用地模拟函数，请结合使用 spyOn 和 mockReturnValueOnce：

import myModuleThatCallsAxios from '../myModule';
import axios from 'axios';

it('Calls the GET method as expected', async () => {
  const expectedResult: string = 'result';

  // set up mock for axios.get
  const mock = jest.spyOn(axios, 'get');
  mock.mockReturnValueOnce({ data: expectedResult });

  const result = await myModuleThatCallsAxios.makeGetRequest();

  expect(mock).toHaveBeenCalled();
  expect(result).toBe(expectedResult);

  // restore axios.get
  mock.mockRestore();
});

Answer 6

一种为导入提供新功能以扩展原始模块（如declare module "axios" { ... }）的常用方法。这不是最好的选择，因为这应该针对整个模块进行，而模拟可能在一个测试中可用，而在另一个测试中不可用。

在这种情况下，类型安全的方法是在需要的地方断言类型：

  (axios.get as jest.Mock).mockReturnValueOnce({ data: expectedResult });
  ...
  expect(axios.get as jest.Mock).toHaveBeenCalled();