Jest 与 TypeScript 结合使用时，如何 mock 一个导入模块并覆盖它的行为？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用 Jest 进行单元测试。而 TypeScript 则是越来越受到前端开发者的欢迎。当我们需要在 Jest 中使用 TypeScript 时，可能会遇到 mock 一个导入模块并覆盖它的行为的情况。本文将详细介绍如何实现这一功能，并提供示例代码。

Mock 导入模块

在 Jest 中，我们可以使用 jest.mock() 方法来模拟导入模块。这个方法接受两个参数：第一个参数是要模拟的模块的路径，第二个参数是一个可选的模拟实现。

我们可以使用 jest.mock() 方法来模拟一个导入模块，并返回一个模拟对象。这个模拟对象可以覆盖导入模块的行为。例如：

// javascriptcn.com 代码示例
import axios from 'axios';

jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve({ data: 'mockData' }))
}));

test('should mock axios', async () => {
  const response = await axios.get('http://example.com');
  expect(response.data).toEqual('mockData');
});

在这个示例中，我们使用 jest.mock() 方法来模拟 axios 模块。我们传递了一个函数作为第二个参数，这个函数返回了一个模拟对象，这个模拟对象包含了一个 get() 方法，这个方法返回了一个 Promise，这个 Promise 的值是一个包含了 data 属性的对象。我们可以在测试用例中使用这个模拟对象来覆盖 axios 模块的行为。

Mock TypeScript 模块

在使用 TypeScript 开发时，我们可能会遇到需要导入一个 TypeScript 模块的情况。在 Jest 中，我们可以使用 ts-jest 来编译 TypeScript 代码，并模拟 TypeScript 模块。

我们可以使用 jest.mock() 方法来模拟一个 TypeScript 模块。例如：

// javascriptcn.com 代码示例
import { foo } from './foo';

jest.mock('./foo', () => ({
  foo: jest.fn(() => 'mockFoo')
}));

test('should mock TypeScript module', () => {
  expect(foo()).toEqual('mockFoo');
});

在这个示例中，我们使用 jest.mock() 方法来模拟 foo 模块。注意，我们需要传递模块的相对路径，而不是模块的名称。我们传递了一个函数作为第二个参数，这个函数返回了一个模拟对象，这个模拟对象包含了一个 foo() 方法，这个方法返回了一个字符串。我们可以在测试用例中使用这个模拟对象来覆盖 foo 模块的行为。

Mock 导入模块并覆盖它的行为

当我们需要 mock 导入模块并覆盖它的行为时，我们需要先使用 jest.mock() 方法来模拟导入模块，并返回一个模拟对象。然后，我们可以使用 jest.requireActual() 方法来获取原始的导入模块，并覆盖它的行为。

例如，假设我们有一个名为 foo 的模块，它导入了 axios 模块，并使用 axios.get() 方法来获取数据。我们想要测试 foo 模块的行为，但是我们不想实际发起网络请求。我们可以使用 jest.mock() 方法来模拟 axios 模块，并返回一个模拟对象。然后，我们可以使用 jest.requireActual() 方法来获取原始的 axios 模块，并覆盖它的 get() 方法的实现。

// javascriptcn.com 代码示例
import foo from './foo';
import axios from 'axios';

jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve({ data: 'mockData' }))
}));

test('should mock imported module and override its behavior', async () => {
  const axiosGetSpy = jest.spyOn(axios, 'get');
  const result = await foo();
  expect(result).toEqual('mockData');
  expect(axiosGetSpy).toHaveBeenCalledWith('http://example.com');
  axiosGetSpy.mockRestore();
});

在这个示例中，我们使用 jest.mock() 方法来模拟 axios 模块。然后，我们使用 jest.requireActual() 方法来获取原始的 axios 模块，并覆盖它的 get() 方法的实现。我们还使用 jest.spyOn() 方法来创建一个 axios.get() 方法的 spy，以便我们可以检查它是否被调用，并恢复它的实现。

总结

在 Jest 中，我们可以使用 jest.mock() 方法来模拟导入模块，并返回一个模拟对象。这个模拟对象可以覆盖导入模块的行为。在使用 TypeScript 开发时，我们可以使用 ts-jest 来编译 TypeScript 代码，并模拟 TypeScript 模块。当我们需要 mock 导入模块并覆盖它的行为时，我们需要先使用 jest.mock() 方法来模拟导入模块，并返回一个模拟对象。然后，我们可以使用 jest.requireActual() 方法来获取原始的导入模块，并覆盖它的行为。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65662765d2f5e1655df4773d