使用Jest Fetch Mock测试RTK Query突变时遇AbortSignal实例错误

测试RTK Query突变API调用时，尝试匹配模拟结果与成功API调用，却始终报错：Expected signal to be an instanceof AbortSignal。怀疑是jest-fetch-mock的副作用，但不知道如何将输入转换为AbortSignal类型。

测试代码如下：

test('successful response', async () => {
    const wrapper = ({children}) => {
      const storeRef = setupApiStore(testApi);
      return <Provider store={storeRef.store}>{children}</Provider>;
    };
    const classState = {
      statusCodes: 200,
      message: 'Success',
      details: {
        overallPresent: 3,
        overallTotal: 10,
        classStrength: [
          {className: 'class 1', present: 3, total: 3},
          {className: 'class 2', present: 0, total: 7},
        ],
      },
    };
    const body = {
      schoolName: 'school 1',
      className: 'class 1',
    };
    fetchMock.mockResponse(JSON.stringify(classState));

    const {result, waitForNextUpdate} = renderHook(
      () => useClassMutation(),
      {wrapper},
    );

    const [students, initialResponse] = result.current;
    expect(initialResponse.data).toBeUndefined();
    expect(initialResponse.isLoading).toBe(false);

    act(() => {
      students(body);
    });

    await waitForNextUpdate({timeout: 500});

    const loadedResponse = result.current;
    console.log('loadedResponse: ', loadedResponse);

    expect(loadedResponse).toEqual(paradeState); //error: 'Expected signal to be an instanceof AbortSignal'
  });

解决方案 #

• 问题根源：RTK Query内部会给fetch调用传递signal参数（AbortSignal实例），旧版本jest-fetch-mock未正确处理该参数，触发类型校验错误。

• 修复方案1：升级jest-fetch-mock
  新版本已修复AbortSignal兼容问题，执行命令升级：

  npm install jest-fetch-mock@latest --save-dev
  # 或使用yarn
  yarn add jest-fetch-mock@latest --dev
  

• 修复方案2：手动处理signal参数
  若无法升级，可修改mock实现，显式接收并忽略signal参数：

  fetchMock.mockImplementation((url, options) => {
    // 直接返回模拟响应，忽略signal参数
    return Promise.resolve(new Response(JSON.stringify(classState)))
  })
  

• 额外修正：测试断言笔误
  代码最后一行的paradeState应为定义好的classState，且result.current是数组，第二个元素才是响应对象，需修正断言逻辑：

  expect(loadedResponse[1].data).toEqual(classState);
  

内容的提问来源于stack exchange，提问作者Eleanor Tay