"Expected signal to be an instanceof AbortSignal? with Jest Fetch Mock

1.7k Views Asked by At

I am testing an rtk query mutation api call. I'm trying to match the mock result to a successful api call but I always get an error: 'Expected signal to be an instanceof AbortSignal'. I understand that this may be a side effect of jest-fetch-mock but am not sure how to convert the input(?) into a 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'
  });
1

There are 1 best solutions below

0
On

This is not an RTK Query error - it's an error from the fetch polyfill you are using.

RTK Query is passing an AbortSignal into that fetch call - and then that fetch polyfill complains that AbortSignal is something incompatible.

=> if you polyfill global.fetch, you also have to polyfill global.AbortController with a compatible implementation.

How you do that is very different for each implementation of fetch, so you'll have to research that - but I hope this gives you a direction.