Jest 测试时，如何使用 mockImplementationOnce 修改函数的返回值？

在前端开发中，测试是一个重要的环节。Jest 是一个流行的 JavaScript 测试框架，它提供了丰富的测试工具和 API。在 Jest 中，mock 是一个常用的概念，用于模拟函数或模块的行为，以便进行测试。本文将介绍如何使用 Jest 的 mockImplementationOnce 方法来修改函数的返回值。

什么是 mockImplementationOnce？

在 Jest 中，mockImplementationOnce 是一个方法，用于设置函数的模拟实现。它只会对函数的第一次调用生效，之后的调用将恢复函数的原始实现。通过 mockImplementationOnce，我们可以在测试中动态地修改函数的返回值，以便测试不同的场景。

如何使用 mockImplementationOnce？

下面是一个示例代码，演示了如何使用 mockImplementationOnce 修改函数的返回值。

// javascriptcn.com 代码示例
// 原始函数
function fetchData() {
  return fetch('https://api.example.com/data').then(response => response.json());
}

// 测试代码
test('fetchData should return mock data', async () => {
  const mockData = { name: 'Alice', age: 20 };
  const mockFetch = jest.fn(() => Promise.resolve({
    json: () => Promise.resolve(mockData),
  }));
  global.fetch = mockFetch;

  const result = await fetchData();
  expect(result).toEqual(mockData);

  // 修改返回值
  mockFetch.mockImplementationOnce(() => Promise.resolve({
    json: () => Promise.resolve({ name: 'Bob', age: 30 }),
  }));

  const result2 = await fetchData();
  expect(result2).toEqual({ name: 'Bob', age: 30 });

  // 恢复原始实现
  mockFetch.mockRestore();
});

在上面的示例代码中，我们首先定义了一个原始函数 fetchData，它会调用 fetch 方法获取数据，并返回 Promise。然后，在测试代码中，我们使用 jest.fn 方法创建了一个 mock 函数 mockFetch，并将其赋值给全局变量 global.fetch。这样，当 fetchData 调用 fetch 方法时，实际上会调用 mockFetch。

接下来，我们使用 mockImplementationOnce 方法修改 mockFetch 的返回值。在第二次调用 fetchData 时，mockFetch 会返回一个新的 Promise，其中 json 方法返回了一个新的 mock 数据。这样，我们就成功地修改了 fetchData 的返回值，以便测试不同的场景。

最后，我们使用 mockRestore 方法恢复了 mockFetch 的原始实现，以便其他测试不受影响。

总结

在 Jest 测试中，mock 是一个常用的概念，用于模拟函数或模块的行为。mockImplementationOnce 是一个方法，用于设置函数的模拟实现。它只会对函数的第一次调用生效，之后的调用将恢复函数的原始实现。通过 mockImplementationOnce，我们可以在测试中动态地修改函数的返回值，以便测试不同的场景。

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