Testing custom useMutation

[caiquecastro]

Have anyone experience with tests for custom useMutation?

[mosef]

I'm wondering about this too. I can't find a way to actually trigger the mutation. I can render the hook with @testing-library/react-hooks but mutations require the mutate function to get called.

[TkDodo]

call them in act ?

also have a look at how useMutation is tested internally: https://github.com/tannerlinsley/react-query/blob/813d70f659db73cc484fc0f465ed5a760f470853/src/react/tests/useMutation.test.tsx

[arturhaddad]

call them in act ?

also have a look at how useMutation is tested internally: https://github.com/tannerlinsley/react-query/blob/813d70f659db73cc484fc0f465ed5a760f470853/src/react/tests/useMutation.test.tsx

The referred link helped me a lot to test the hook, thanks.

[rek]

For v5 you want: https://github.com/TanStack/query/blob/2d42f2bbc4e7f7d22b8948b8f5dd688382b61642/packages/react-query/src/__tests__/useMutation.test.tsx

[favna]

Chiming in a good while later, it's a shame that there is no better way to do this like it is for useQuery with renderHook as is documented here: https://tanstack.com/query/latest/docs/framework/react/guides/testing

[jazztester]

Hey Guys for anyone using vitest here is an eg:

// mock the file where custom mutate function is declared:

vi.mock("api/FilewithMutation", async () => {
        return {
        useUpdateCustomHook: vi.fn(() => ({
            mutate: vi.fn(),
            isLoading: false,
        })),
        };
    });

// in the test we can import the actual implementation and see, any type is used as there are too many this in mutation hook to be mocked

      const mutateMock = vi.fn();
        vi.mocked(useUpdateCustomHook).mockReturnValue({
            mutate: mutateMock,
        } as any);
        
         await waitFor(() => {
            expect(mutateMock).toHaveBeenCalledWith({
             //expected response
            });
        });

[fbraem]

I solved it by using the withSetup function that is decribed on https://alexop.dev/posts/how-to-test-vue-composables

Use the following code in a vitest.setup.ts file. Add the path of this file to the setupFiles property of the test object in vite.config.ts

import {
  type App, createApp,
} from 'vue';
import { VueQueryPlugin } from '@tanstack/vue-query';

declare global {
  var withSetup: <T>(composable: () => T) => [T, App];
}

// Use this function to test composables.
// See: https://alexop.dev/posts/how-to-test-vue-composables/
if (!globalThis.withSetup) {
  globalThis.withSetup = <T>(composable: () => T): [T, App] => {
    let result: T;
    const app = createApp({
      setup() {
        result = composable();
        return () => {};
      },
    }).use(VueQueryPlugin, { queryClientConfig: { defaultOptions: { queries: { retry: false } } } });

    app.mount(document.createElement('div'));
    return [result, app];
  };
}

I don't mock the function used by the mutation. I use msw to mock the POST response.
Then you can write a test like this:

  it('can create a user', async() => {
    const [result] = withSetup(() => {
      const mutation = useUserMutation();
      mutation.mutate({
        ...
      });
      return mutation;
    });
    await flushPromises();
    expect(result.isSuccess.value).toBeTruthy();
    expect(result.data.value?.id).toBeDefined();
  });