jestjs - react-query how to call mutate from custom useMutation hook in Jest test

Question

I'm running a React Native project where I'm testing custom hooks written with react-query. I'm using Jest, @testing-library/react-hooks and @testing-library/react-native. In my testing I can't seem to find a way to call the mutate function returned by the hook.

Here's a look at the custom hook:

export default function useAuthentication() {
  const { mutate, data, isSuccess, isError } = useMutation(
    authenticationApi.authenticateUser
  );
  return { mutate, data, isSuccess, isError };
}

Following the documentation from react-query I am rendering the hook with renderHook() and awaiting the result of the mutation call:

const authBody: AuthBody = {
  username: '111111',
  password: '111111',
};

describe('Authentication Hook', () => {
  const sanityCall = () =>
    axios.post('http://localhost:4000/auth/authenticate');
  console.log(sanityCall());

  const queryClient = new QueryClient();
  it('Gets authentication data', async () => {
    const wrapper = ({ children }: any) => (
      <QueryClientProvider client={queryClient}>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            {children}
          </PersistGate>
        </Provider>
      </QueryClientProvider>
    );
    const { result, waitFor } = renderHook(() => useAuthentication(), {
      wrapper,
    });

    await waitFor(() => {
      result.current.mutate({
        username: authBody.username,
        password: authBody.password,
      });
      return result.current.isSuccess;
    });
    expect(result.current.data).toEqual({ answer: 42 });
  });
});

It doesn't call the API. My local server's terminal window logs that I'm pinging the server when using the sanityCall() but remains silent when I comment out that call and rely on the hook. Does anyone have any ideas for how to go about testing a custom hook like this?

question from:https://stackoverflow.com/questions/65851260/react-query-how-to-call-mutate-from-custom-usemutation-hook-in-jest-test

Answer 1

Wrapping it in Act and calling mutate there resulted in a call to my server:

const Wrapper = ({ children }: any) => (
  <QueryClientProvider client={queryClient}>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <NavigationContainer>{children}</NavigationContainer>
      </PersistGate>
    </Provider>
  </QueryClientProvider>
);

it('Gets authentication data', async () => {
    const { result } = renderHook(() => useAuthentication(), {
      wrapper: Wrapper,
    });
    act(() => {
      result.current.mutate({
        username: authBody.username,
        password: authBody.password,
      });
    });
    const token = store.getState().token;
    console.log('TOKEN:');
    console.log(token);
  });