如何在 Jest 中使用 Mock 函数？

在前端开发中，使用 Mock 函数模拟一些数据或者模拟函数的返回值可以方便我们进行单元测试。Jest 是一个流行的 JavaScript 测试框架，它内置了 Mock 函数的支持，本文将介绍如何在 Jest 中使用 Mock 函数。

什么是 Mock 函数？

Mock 函数是一个虚拟的函数，它模拟了一个真实的函数，当被调用时可以返回一个特定的值、修改函数的返回值以及捕获函数被调用的参数和调用的次数。Mock 函数可以模拟和隔离应用程序的不同部分，从而使测试更加简单、可扩展和稳定。

基本用法

在 Jest 中，我们可以使用 jest.fn() 函数来创建一个 Mock 函数。简单的示例代码如下：

// 创建 Mock 函数
const mockFn = jest.fn();
mockFn('hello', 'world');
// 打印参数信息和返回值，并验证最后一次执行的结果
console.log(mockFn.mock.calls); // [ [ 'hello', 'world' ] ]
console.log(mockFn.mock.results[0].value); // undefined
console.log(mockFn.mockReturnValue.mock.results[0].value); // undefined

在上述示例代码中，我们定义了一个 Mock 函数，调用它，并使用 mock.calls 和 mock.results 属性来获取函数被调用的参数和返回值。如果我们没有显式的调用 mockReturnValue 函数来指定返回值，那么 Mock 函数的默认返回值为 undefined。

Mock 函数的使用场景

以下是几个 Mock 函数的使用场景：

模拟函数的返回值

有时，在测试时我们需要模拟一个函数的返回值，而不是调用真实的函数。我们可以使用 mockReturnValue 函数来指定 Mock 函数的返回值。

// 创建 Mock 函数并指定返回值
const mockFn = jest.fn().mockReturnValue(42);
// 调用函数并获取返回值
const result = mockFn();
// 验证返回值是否为 42
expect(result).toBe(42);

在上述示例代码中，我们定义了一个 Mock 函数并使用 mockReturnValue 函数来指定返回值为 42，然后调用该函数并获取返回值并验证其是否为 42。

模拟异步函数

在前端开发中，我们经常会调用异步函数来获取数据。如果我们想在 Jest 测试中模拟异步函数调用，则需要使用 async 和 await 关键字和 Promise.resolve() 函数。以下是一个简单的示例代码：

// 模拟异步函数
const mockAsyncFn = jest.fn().mockResolvedValue('hello world');
// 使用 async 和 await 关键字来模拟异步测试
test('async test', async () => {
  const result = await mockAsyncFn();
  expect(result).toBe('hello world');
});

在上述示例代码中，我们通过 mockResolvedValue 函数来模拟一个异步函数返回值为 'hello world'，并使用 async 和 await 关键字来模拟异步测试。在测试中，我们可以验证异步函数的返回值是否为 'hello world'。

捕获函数的参数和调用次数

有时，在测试中，我们需要验证函数的参数和调用次数是否正确。我们可以使用 mock.calls 和 mock.calls.length 属性来捕获函数的参数和调用次数。以下是一个简单的示例代码：

// 创建 Mock 函数并调用多次
const mockFn = jest.fn();
mockFn('a');
mockFn('b');
// 验证函数的参数和调用次数是否正确
expect(mockFn.mock.calls.length).toBe(2);
expect(mockFn.mock.calls[0][0]).toBe('a');
expect(mockFn.mock.calls[1][0]).toBe('b');

在上述示例代码中，我们定义了一个 Mock 函数并调用多次，在测试中使用 mock.calls 和 mock.calls.length 属性来捕获函数的参数和调用次数，从而验证测试是否正确。

总结

Mock 函数是 Jest 测试框架中非常重要的一部分，它可以帮助我们方便的进行单元测试和集成测试，从而提高软件的质量和稳定性。在本文中，我们介绍了 Jest Mock 函数的基本用法和其在测试中的使用场景，希望对您有所帮助。

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