“預期信號是 AbortSignal 的實例？使用 Jest Fetch Mock

Question

我正在測試 rtk 查詢突變 api 調用。 我試圖將模擬結果與成功的 api 調用相匹配，但我總是收到錯誤消息：“預期信號是 AbortSignal 的實例”。 我知道這可能是 jest-fetch-mock 的副作用，但我不確定如何將輸入（？）轉換為 typeof 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'
  });

Answer 1

這不是 RTK 查詢錯誤 - 這是您使用的fetch polyfill 的錯誤。

RTK 查詢將AbortSignal傳遞到該fetch調用中 - 然后fetch polyfill 抱怨AbortSignal是不兼容的。

=> 如果你global.fetch ，你還必須使用兼容的實現來global.AbortController 。

對於fetch的每個實現，你如何做到這一點是非常不同的，所以你必須研究它 - 但我希望這能給你一個方向。