无法在 Next.js 中模拟外部函数

Question

我有一个名为 makeApiRequest 的函数，该函数的唯一目的是创建 REST 请求并且它使用 fetch，我已经在许多 next.js 组件中导入了这个组件，如下所示：

import makeApiRequest from "@/app/helpers/api";

现在我想测试这些组件，我似乎无法正确执行它，因为我的许多组件都有多个 useEffects 并且这些 useEffects 在多个路由上调用 makeApiRequest ，那么我该如何实现呢？我似乎无法正确地模拟它，我什至阅读了文档，但他们所做的只是在类上使用间谍，然后模拟类的实例

我本想断言类似的事情

expect(mockMakeApiRequest).toHaveBeenCalled()

或类似的东西，但它甚至不适用于我的情况

Answer 1

要在 Next.js 组件中模拟 makeApiRequest 函数，您可以使用 jest.mock 和 jest.fn 的组合来替换测试中 makeApiRequest 的实现。这是实现这一目标的方法：

在您的测试文件中，模拟 makeApiRequest 函数。

jest.mock('@/app/helpers/api', () => ({
  __esModule: true,
  default: jest.fn(),
}));

在运行测试之前，定义模拟函数应返回的内容。

import makeApiRequest from '@/app/helpers/api';

makeApiRequest.mockImplementation(() => Promise.resolve({ data: 'mockData' }));

现在，当您的组件运行并在 useEffect 中调用 makeApiRequest 时，将调用模拟，您可以按预期断言它。

expect(makeApiRequest).toHaveBeenCalled();

通过确保模拟函数在测试期间正确替换实际实现，即使使用多个 useEffect 挂钩，这种方法也应该有效。