Mocking a useMutation and checking number of calls of mutate

[leo-petrucci]

I'm having some trouble checking my mutation is actually being launched with Testing Library and Jest.

Consider the following hook:

// in /utils/hooks/data/mutations
export const useCustomMutation= () =>
  useMutation('something here', (body) =>
    // hit the endpoint here
  );

// ...
const mutation = useCustomMutation()

I'm currently mocking it as:

jest.mock('utils/data/hooks/data/mutations', () => ({
  useCustomMutation: () => ({ mutate: jest.fn() }),
}));

const mockedUseCustomMutation = useCustomMutationas jest.Mock;

I then click a button to start my mutation in my test (I've verified this is happening by console.logging), but the following happens:

    await waitFor(() => {
      expect(mockedUseCustomMutation ().mutate.mock.calls.length).toBe(
        1
      ); // returns 0
    });

Any tips on how to handle this? The docs give examples for testing queries, but there's no examples for mutations.

[TkDodo]

the docs don't suggest to mock the actual mutation function, but to rather mock the outgoing network requests. You can do that with something like nock or I would suggest mock-service-worker.

[leo-petrucci]

That's unfortunate, using mock-service-worker adds a lot of complexity. Mocking the queries has been incredibly easy so far so I was really hoping there would be a way to do the same with mutations.

[TkDodo]

That's unfortunate, using mock-service-worker adds a lot of complexity.

It's a tradeoff for sure, but it also has many advantages. For example, we use it for storybook as well as jest tests.

Mocking the queries has been incredibly easy so far so I was really hoping there would be a way to do the same with mutations.

I'm not sure, I think it should also work that way. If you can provide a codesandbox reproduction, I can take a closer look.

you can also maybe get inspired by how useMutation is tested internally: https://github.com/tannerlinsley/react-query/blob/ac342e237ae9fab6759f2d7be616662da6c16225/src/react/tests/useMutation.test.tsx

[anilanar]

I agree that it's really a shame that it's very trivial to modify the query cache but not so easy for mutations.

There are variety of "mutations" some of which are really hard to mock without inventing a whole new framework around it, which would be doing the exact same work react-query would have done if mutations were easily mockable somehow similar to queries.

[leo-petrucci]

Thought I'd update this with a solution I've found:

const mockedMutate = jest.fn();

jest.mock('path/to/hook', () => ({
  useMutationHook: () => ({ mutate: mockedMutate }),
}));

//...

expect(mockedMutate).toHaveBeenCalledTimes(1);

This works as expected 😊

The way I was attempting to do it works with useQuery, but not for useMutation. I don't really know why.

[Julianhm9612]

I found this solution:

jest.mock('react-query', () => ({
  useMutation: jest.fn()
}));

const mockMutationFn = { mutate: () => mockedMutate() };
(useMutation as jest.Mock).mockReturnValue(mockMutationFn);

expect(mockedMutate).toHaveBeenCalled();

[SalahAdDin]

@TkDodo

I managed to test it from a screen by using the following:

vi.mock('@application/hooks/useTodos')
vi.mock('@application/hooks/useHistories')

const mockUseTodos = vi.mocked(useTodos)
const mockUseHistories = vi.mocked(useHistories)

mockUseTodos.mockReturnValue({
      data: todosMock,
      error: null,
      isLoading: false,
      create: mockUseMutationResult<Todo>(),
      remove: { mutate: removeMock },
      update: mockUseMutationResult<UpdateTodoProps>(),
    })

But we get then a Typescript issue:

Type '{ mutate: Mock<Procedure>; }' is not assignable to type 'UseMutationResult<void, Error, string, unknown>'.
  Type '{ mutate: Mock<Procedure>; }' is not assignable to type 'Override<MutationObserverSuccessResult<void, Error, string, unknown>, { mutate: UseMutateFunction<void, Error, string, unknown>; }> & { ...; }'.
    Type '{ mutate: Mock<Procedure>; }' is missing the following properties from type 'Override<MutationObserverSuccessResult<void, Error, string, unknown>, { mutate: UseMutateFunction<void, Error, string, unknown>; }>': data, error, variables, isError, and 10 more.ts(2322)
useTodos.ts(39, 44): The expected type comes from property 'remove' which is declared here on type '{ data: Todo[] | undefined; error: Error | null; isLoading: boolean; create: UseMutationResult<void, Error, Todo, unknown>; remove: UseMutationResult<void, Error, string, unknown>; update: UseMutationResult<...>; }'

We managed to mock the UseMutationResult by:

export const mockUseMutationResult = <TVariables,>(): UseMutationResult<
  void,
  Error,
  TVariables,
  unknown
> => ({
  mutate: vi.fn() as UseMutateFunction<void, Error, TVariables, unknown>,
  mutateAsync: vi.fn(),
  data: undefined,
  error: null,
  isError: false,
  isIdle: true,
  isLoading: false,
  isPaused: false,
  isSuccess: false,
  reset: vi.fn(),
  status: 'idle',
  variables: undefined,
  context: undefined,
  failureCount: 0,
})

But we have another issue yet:

Object literal may only specify known properties, and 'isLoading' does not exist in type 'Override<MutationObserverIdleResult<void, Error, TVariables, unknown>, { mutate: UseMutateFunction<void, Error, TVariables, unknown>; }> & { ...; }'.ts(2353)

What's the best way to mock it so we don't get typing issues?