在 Jest 中使用 jest.fn() 进行 mock-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要进行单元测试以确保代码的正确性。而在单元测试中，我们经常需要 mock 掉一些函数或者模块，使得测试不会因为外部的因素而受到干扰。在 Jest 中，我们可以使用 jest.fn() 来进行 mock。

jest.fn() 简介

jest.fn() 是 Jest 中用来创建 mock 函数的函数，读作 jest function。通过它，我们可以方便地创建一个 mock 函数，并且可以通过一系列方法来对这个 mock 函数进行相关操作。

使用 jest.fn() 进行 mock

在 Jest 中，我们可以使用 jest.fn() 来 mock 掉一个函数。具体来说，我们可以使用 jest.mock() 函数来 mock 掉一个模块，然后在测试中使用 jest.fn() 代替模块中的某个函数。例如，假设我们有一个模块叫做 data.js，其中包含了一个函数叫做 fetchData：

// data.js
export const fetchData = async (url) => {
  const response = await fetch(url);
  const data = await response.json();
  return data;
};

我们可以使用 jest.fn() 来 mock 掉这个函数，如下所示：

// __mock__/data.js
export const fetchData = jest.fn();

这样，我们就成功 mock 掉了 fetchData 函数，可以在测试中使用 jest.fn() 来代替它。

如何使用 jest.fn() 创建 mock 函数

除了可以使用 jest.mock() 来 mock 掉一个模块中的函数外，我们还可以使用 jest.fn() 直接创建一个 mock 函数。具体来说，我们可以像下面这样创建一个 mock 函数：

const mockFunc = jest.fn();

这样，我们就创建了一个名叫 mockFunc 的 mock 函数。这个 mock 函数可以用来 mock 掉某个函数，并且在测试中用来检查一些特定的行为是否被执行。

如何验证 mock 函数的调用

通过 jest.fn() 创建的 mock 函数还可以用来验证一些特定的调用行为，具体来说，我们可以通过下面这些方法来验证：

mockFunc.mock.calls：一个数组，其中每个元素表示该 mock 函数被调用时的参数列表。
mockFunc.mock.calls.length： mock 函数被调用的次数。
mockFunc.mock.results：一个数组，其中包含了 mock 函数每次执行的结果。
mockFunc.mock.instances：一个数组，其中包含了调用该 mock 函数时创建的所有实例对象。

这些方法可以用来监视我们的 mock 函数被调用的情况，并且可以通过它们来验证我们的代码行为是否正确。例如，假设我们有一个名为 fetchData 的函数，我们可以像下面这样使用 jest.fn() 进行 mock，并且通过 mockFunc.mock.calls.length 来验证 fetchData 函数是否被调用：

import { fetchData } from './data';

test('fetchData should be called', () => {
  const mockFunc = jest.fn();
  fetchData('https://example.com');
  expect(mockFunc.mock.calls.length).toBe(1);
});

如何给 mock 函数设置返回值

除了可以使用上面提到的方法来监视 mock 函数的调用情况外，我们还可以设置 mock 函数的返回值。具体来说，我们可以通过 mockFunc.mockReturnValue() 或者 mockFunc.mockResolvedValue() 等方法来设置 mock 函数的返回值。例如，假设我们有一个名为 fetchData 的函数，我们可以像下面这样使用 jest.fn() 进行 mock，并设置其返回值：

import { fetchData } from './data';

test('fetchData should return some data', async () => {
  const mockData = { name: 'John Doe' };
  const mockFunc = jest.fn().mockResolvedValue(mockData);
  const data = await fetchData('https://example.com');
  expect(data).toEqual(mockData);
});

这样，我们就成功设置了 mock 函数的返回值，并且在测试中使用该返回值来检查 fetchData 函数是否正常工作。

结论

在 Jest 中，我们可以使用 jest.fn() 来进行 mock 函数。通过它，我们可以轻松地 mock 掉一个函数或者模块，并且可以使用多种方法来验证 mock 函数的调用情况和设置 mock 函数的返回值。掌握 jest.fn() 的使用，可以帮助我们在单元测试中更加轻松地进行代码的验证和测试。

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