测试 Redux 中间件抛出异步操作

Question

我正在测试一个中间件，它在拦截另一个操作时抛出异步操作（重击）

derivedAction

originalAction

。

中间件

export const myMiddleware: Middleware = (
  storeApi: MiddlewareAPI<AppDispatch, RootState>
) => (next) => (action: { type: string; payload: unknown; error: unknown }) => {
  next(action);

  if (originalAction.fulfilled.match(action)) {
      void storeApi.dispatch(derivedAction(derivedActionPayload));
  }
}

测试

    let nextMock: jest.Mock;
    let dispatchMock: jest.Mock;

    nextMock = jest.fn();
    dispatchMock = jest.fn();

    mockedState = {};
    storeMock = {
      dispatch: dispatchMock,
      getState: () => mockedState,
    };

      jest.spyOn(originalAction.fulfilled, "match").mockReturnValue(true);

    myMiddleware(storeMock)(nextMock)(originalAction);
    expect(dispatchMock).toHaveBeenNthCalledWith(
        1,
        derivedAction(derivedActionPayload)
      );

代码在 React 17 下工作，但是当我切换到 React 18 时，我收到了

    n: 1
    Expected: [Function anonymous]
    Received: [Function anonymous]

有什么想法/建议吗？

Answer 1

您遇到的错误似乎与测试用例中的函数比较有关。它表明您期望调用的函数没有被识别为实际调用的函数。有时会发生这种情况，因为不同版本的库或 JavaScript 引擎之间的函数比较或内部处理方式发生了变化。

由于该错误是在切换到 React 18 后发生的，因此测试环境中函数的处理或模拟方式可能会发生细微的变化。

以下是一些调试和可能解决问题的建议：

检查 Jest 配置：确保您的 Jest 配置与 React 18 兼容。在 React 主要版本之间转换时，Jest 配置可能需要更改或更新。 更新 Jest 和相关库：确保您使用的是最新版本的 Jest 和相关测试库。有时，兼容性问题会在新版本中得到解决。 检查模拟实现：仔细查看如何模拟 OriginalAction.fulfilled.match 函数。确保在不同版本的 React 和 Jest 中正确且一致地模拟它。 查看 React 18 更改：查看 React 18 的发行说明或文档，看看是否有任何与测试或函数处理相关的更改可能会影响您的代码。 测试环境：验证问题是否在不同环境（例如不同机器、CI/CD 环境）中仍然存在。有时，此类问题可能是特定于环境的。 替代测试方法：如果问题仍然存在，请考虑使用替代方法来测试此中间件，例如集成测试或不依赖功能比较的测试。 调试工具：利用 Jest 或其他测试库提供的调试工具来检查函数调用并比较它们是否有任何差异。 通过仔细检查和调试您的测试设置，您应该能够确定问题的根本原因并相应地调整您的代码或配置。