isError not firing in mutate tests using @testing-library/react-hooks

[joeldmyers]

When I write a test for the error path for a custom hook using @testing-library/react-hooks, it seems to never get to isError status, but rather, only isSuccess.

The idea of this custom hook use case is that it uses fetch to delete a data record via API call, and then, rather than have another API call to re-fetch the updated data set, it just deletes it locally through setQueryData.

Here is an example custom hook:

// useDeleteMyData.tsx

import { useMutation, useQueryClient } from 'react-query';

const deleteMyData = (id: string) => {
  return fetch(`https://foo.com/api/delete/${id}`, {
    method: 'DELETE',
    mode: 'cors'
  }).then((response) => {
    if (response.status !== 200) {
      throw new Error(
        `Status Code ${response.status}.  Error deleting data: ${response.statusText}.`
      );
    }
  });
};

const useDeleteMyData = () => {
  const queryClient = useQueryClient();
  return useMutation((id: string) => useDeleteMyData(id), {
    onSuccess: (data, id) => {
      /** 
      * here is where we are filtering out the data point 
      * we just deleted rather than force an API call to get all the data again.
      */
      queryClient.setQueryData('myData', (oldData: any[]) =>
        oldData.filter((entry) => entry.id != id)
      );
    }
  });
};

export default useDeleteMyData;

And here is an example of the test in question:

// useDeleteMyData.test.tsx

import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { renderHook } from '@testing-library/react-hooks';
import useDeleteMyData from './useDeleteMyData';
import fetch, { enableFetchMocks } from 'jest-fetch-mock';

enableFetchMocks();

describe('useDeleteMyData hook', () => {

  const queryClient = new QueryClient();
  const wrapper = ({ children }: any) => {
    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
  };

  const { result, waitFor } = renderHook(() => useDeleteMyData(), { wrapper });

  it('does not delete the data locally when it does not get a successful API response back', async () => {

    // temporarily disable console.error, since we expect this to throw an error
    const originalError = console.error;
    console.error = jest.fn();
    
    fetch.mockResponseOnce(JSON.stringify({}), { status: 404 });
    queryClient.setQueryData('myData', [{ foo: 'bar' }]);
    act(() => { result.current.mutate('foo'); });

    await waitFor(() => result.current.isError);
    /**
     * Here, isError never seems to be true even though it should.
     * In testing, I can confirm that the error is actually thrown and all is working as expected; 
     * however, this happens under the isSuccess state only using this testing library.
     */
    const myData: { id: string }[] = queryClient.getQueryData('myData');
    expect(myData.length).toEqual(1);
    // Re-enable console.error
    console.error = originalError;
  });
});

I am able to get isError to be true in the more verbose way of basically rendering a component, and then simulating a click to trigger the mutation, etc., similar to how tests are done here - https://github.com/tannerlinsley/react-query/blob/master/src/react/tests/useMutation.test.tsx but I wanted to know if there was something I was missing about testing the error cases using @testing-library/react-hooks.

[joeldmyers]

So I figured out one issue around this, which is that if you have multiple tests, you need to create a QueryClient for each of those tests, as per here #270 Otherwise it reuses the same QueryClient state for subsequent tests.

However, the main idea is similar, it is just timing out in the error case rather than firing isError. I have seen about having to set retries to 0 but that seems to not be working for me.

[joeldmyers]

Aha, after some tweaks, I was able to get it to work with isError.

I created a testHelpers.tsx file with the following code:

import React, { ReactNode } from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { WrapperComponent } from '@testing-library/react-hooks';

interface wrapperProps {
  children: ReactNode;
}

export const createQueryWrapper = (): WrapperComponent<unknown> => {
  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  const wrapper = ({ children }: wrapperProps) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );

  return wrapper;
};

And then in the test file it looks like:

import { createQueryWrapper } from '[wherever]/testHelpers.tsx';
...

it('does not return anything if the API call fails', async () => {

    (myAPICallMethod as jest.Mock).mockRejectedValue({ status: 'error' });

    const { result, waitFor } = renderHook(() => myCustomHook(), {
      wrapper: createQueryWrapper()
    });

    await waitFor(() => result.current.isError);

    expect(result.current.data).toEqual(undefined);
  });

This fires isError correctly.

Just sharing here in case anyone else runs across the same issue.

[atwright147]

The trick here seems to be disabling retry, is that right?

And for future searchers, this is the line that does that:

const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });