如何在 Jest 中配置 Mock Function 快速生成模板代码？

前言

在前端开发中，使用 Jest 进行单元测试已经成为一个不可或缺的过程，Mock Function 是 Jest 中常用的一种测试 stub，即对于被测试的函数进行本地虚拟化，以使得测试变的更加封闭、可重复、可控，从而更容易发现错误和问题。但是，为了方便测试，Mock Function的使用也需要一定的配置，否则可能会增加代码量和维护难度。在本文中，我将会介绍如何在 Jest 中配置 Mock Function 来快速生成模板代码。

Mock Function 的基本概念

在 Jest 中，可以使用 jest.fn() 或者 jest.mock() 来创建 Mock Function ，这两种方法的区别如下：

• jest.fn() 创建的 Mock Function 是一个完全独立的、被 Jest 所管理的纯函数，它不会对模块中的其他函数产生任何影响；
• jest.mock() 则会自动 Mock 模块导出的所有函数，将其转换为 Mock Function，从而实现模块的 Mock。如果一个模块中没有导出任何函数，那么 Jest 会创建一个空的 Mock Function，你可以使用 jest.fn() 来操作。

另外，Mock Function 还有一个重要的属性 mock，它可以用来获取 Mock Function 的执行状态、调用次数、参数等信息。例如，mock.calls 可以获取 Mock Function 调用时的所有参数数组。

如何配置 Mock Function

为了方便使用 Mock Function，我们可以将其统一封装在一个公共的文件中，在测试文件中进行导入，从而避免了重复的代码和维护难度。下面我将介绍如何在 Jest 中配置 Mock Function。

在 setupFilesAfterEnv 中进行配置

setupFilesAfterEnv 选项可以在运行 Jest 前提前执行的一段脚本，它可以帮助我们进行一些额外的全局配置。我们可以使用 jest.fn() 手动创建一个 Mock Function，然后使用 global 将其绑定到全局对象中，从而在测试文件中可以直接调用该 Mock Function。

// mock-setup.js
global.mockFunc = jest.fn();

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['./mock-setup.js'],
};

在测试文件中，可以直接调用 mockFunc() 函数，例如：

test('mock function test', () => {
  mockFunc('hello', 'world');
  expect(mockFunc).toHaveBeenCalledWith('hello', 'world');
});

在 mocks 目录中进行模块化配置

在模块化配置中，我们可以使用 jest.mock() 方法自动为模块中的所有导出函数创建 Mock Function。为了与真正的模块名区分，在同一目录下创建一个命名为 mocks 的文件夹，并在该文件夹下创建与要 Mock 模块同名的文件，并在该文件中按照需求自定义 Mock Function。

// __mocks__/myModule.js
export const myFunc = jest.fn();

// myModule.js
import { myFunc } from './__mocks__/myModule';
export function myFunc() {
  // ...
}

在测试文件中，可以直接调用 myFunc() 函数，例如：

test('mock function test', () => {
  myFunc('hello', 'world');
  expect(myFunc).toHaveBeenCalledWith('hello', 'world');
});

总结

在 Jest 中，Mock Function 是一个非常重要的测试 stub，它可以帮助我们更加封闭、可重复、可控的进行单元测试。为了避免 Mock Function 的重复配置和维护难度，可以统一将其配置在一个公共的文件中，或者使用模块化的方式进行配置。在项目中，合理使用 Mock Function 可以大大提高测试的效率和代码质量，从而为团队带来更多的收益和价值。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65aba3d1add4f0e0ff54cd30