Test fails using onError callback

[diogo-simao]

Describe the bug

Im using Jest and MSW to test a component that uses useQuery.

Here is my current test:

test('should handle fetch data error', async () => {
      const onClose = jest.fn();

      server.use(
        rest.get('/partition/:partitionId`,
          (_req, res, ctx) => res.once(ctx.status(400)),
        ),
      );

      render(
        <PartitionDetails onClose={onClose} partition={mockPartitionDetails} />,
      );

      await waitForElementToBeRemoved(screen.getByTestId('loader-container'));

      expect(onClose).toHaveBeenCalled();
    });

The problem is that my test is failing due a unhandled promise, rejected by MSW and not been handled by the onError:

async function fetchContacts(): Promise<PartitionFindByIdResponse> {
    const response = await PartitonContactService.findById(partition.id);
    return response;
  }

  const { isLoading, data } = useQuery<PartitionFindByIdResponse>(
    ['partition-contacts'],
    fetchContacts,
    {
      onError: () => {
     // using on error without try/catch on queryFn makes the test fail
        onClose();
      },
      cacheTime: 0,
      retry: false,
    },
  );

If my queryFn is wrapped by a try/catch block, everything passes:

 async function fetchContacts() {
    try {
      const response = await PartitonContactService.findById(partition.id);
      return response;
    } catch (error) {
      onClose();
    }
  }

  const { isLoading, data } = useQuery(['partition-contacts'], fetchContacts, {
    cacheTime: 0,
    retry: false,
  });

Is there anything that can be made?

Your minimal, reproducible example

/

Steps to reproduce

1. Use a queryFn without a try/catch block
2. Use onError function
3. Make the promise fails within a test

Expected behavior

I was expecting that onError somehow should handle the promise rejection.

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

Linux

react-query version

3.34

TypeScript version

3.9.3

Additional context

No response

[joel-daros]

@diogo-simao To avoid errors aborting your execution, you should silence it during the test:

If you are using React Query V3:

import { setLogger } from 'react-query'

setLogger({
  log: console.log,
  warn: console.warn,
  // ✅ no more errors on the console
  error: () => {},
})

If you are using React Query V4:

const queryClient = new QueryClient({
  logger: {
    log: console.log,
    warn: console.warn,
    // ✅ no more errors on the console
    error: () => {},
  }
})

More info here:
https://tkdodo.eu/blog/testing-react-query#silence-the-error-console

[JoaoPLGomes]

This doesn't work for me.

[mgrayum]

I have the same issue and the proposed solution does not work for me either. The error is no longer being logged, but the test is still short-circuited and the onError callback is not being executed. Can anyone shed more light on this?

[TheRichardW]

I also have the same issue and the proposed solution does not work for me either.

[TkDodo]

the callbacks on queries are deprecated in v4 and have been removed in v5, so I'll not look into this because the only course of action is to remove the callback, which means you don't need to test it.

[mgrayum]

The issue is the same whether I'm using the onError callback or not. If I just inspect the query's error in my component, and render an error message if, say the response is a 400 error, the test fails when axios receives the error response (using msw). My expectation is that react-query will handle the error in a test the same way it would in any other environment.

The query or mutation should handle the axios error the same in a test as it does under normal execution.

[TkDodo]

The issue is the same whether I'm using the onError callback or not.

well the title of this discussion is "Test fails using onError callback", so yeah, how should I know that's not what you mean 🤷‍♂️

My expectation is that react-query will handle the error in a test the same way it would in any other environment.

it does. I have have a working testing environment including failed queries here:

• https://github.com/TkDodo/testing-react-query/blob/20e35ed4180cca6a6942b6984cfd57474c4be3d7/src/tests/hooks.test.tsx#L19
• https://github.com/TkDodo/testing-react-query/blob/20e35ed4180cca6a6942b6984cfd57474c4be3d7/src/tests/App.test.tsx#L13

please check it out, run it, and compare it with your code (which you haven't shared), and then you should be able to pin down what the problem in your implementation is. If not, please share a reproduction.

[abelmark]

The issue is the same whether I'm using the onError callback or not.

well the title of this discussion is "Test fails using onError callback", so yeah, how should I know that's not what you mean 🤷‍♂️

My expectation is that react-query will handle the error in a test the same way it would in any other environment.

it does. I have have a working testing environment including failed queries here:

• https://github.com/TkDodo/testing-react-query/blob/20e35ed4180cca6a6942b6984cfd57474c4be3d7/src/tests/hooks.test.tsx#L19
• https://github.com/TkDodo/testing-react-query/blob/20e35ed4180cca6a6942b6984cfd57474c4be3d7/src/tests/App.test.tsx#L13

please check it out, run it, and compare it with your code (which you haven't shared), and then you should be able to pin down what the problem in your implementation is. If not, please share a reproduction.

So if I am asserting only the result.current.isError this works as expected.

My issue is I set up a global error handler via a QueryCache

export const queryCache = new QueryCache({
  onSuccess: () => {
    console.log('[did I succeed]?');
  },
  onError: (error, query) => {
    console.log('[there was an error in query]');
    logApiError(error);
  },
});

Not only does the console log not get hit, but the logApiError spy does not either.

I've gotten this working as expected on a useMutation test via a MutationCache. Any idea what could be going on here?