Spy on bound mutate in jest test

[mattgd]

Hi! I'm attempting to spy on the bound/local mutate function to ensure it was called during a test (jest).

I'm calling useSWR like so:

const ComponentA: React.FC = () => {
  const { data: me, mutate: mutateMe } = useSWR(
    CacheKey.GET_ME,
    UserService.getMe
  );

  const onChange = async (value: string): Promise<void> => {
    ...
    await mutateMe();
  };

  ...
}

The test is something like the following. Previously I was using the global mutate function with a parameter:

import * as SWR from 'swr';

test('After a user changes their name, should update the user profile and refetch the user.', async () => {
    // I want to spy on the bound mutate instead
    jest.spyOn(SWR, 'mutate');

    render(<ComponentA />);

    // Change ComponentA and other expectations

    // I want this, except for the bound mutate, without the parameter
    expect(SWR.mutate).toBeCalledWith(CacheKey.GET_ME);
  });

What's the best way for me to test that mutateMe was called via a test, without mocking the entire useSWR hook? I'm currently using version 1.1.2 of SWR, but if that's a limiting factor to a solution, happy to upgrade to the newest version.

Thanks in advance for any guidance.

[liamlows]

I also have this same question, is there any way to do this with Jest and ReactTestingLibrary? The use mutate function is what is called last and will help validate the test completed successfully.

[dnyn92]

Hi there! I have the same question. I think it will give my component for confidence if I can spy on the mutate method and check that it is called and it is called with specific parameters. What I have tried so far which did not work:

const mockMutate = jest.fn().mockImplementation(() => {
      return Promise.resolve();
    });
    jest.mock('swr', () => {
      return {
        ...jest.requireActual('swr'),
        useSWRConfig: () => ({ mutate: mockMutate }),
      };
    });
...

expect(mockMutate).toHaveBeenCalledTimes(1);

The tests is failing with that mutate has been called 0 times.

I appreciate any help or ideas.

[dcjwu]

Unfortunately, still solution needed.

/* Usage */
const { mutate } = useSWR(url, fetcher, {
    revalidateOnFocus: false,
});

const { mutate } = React.useContext(SwrMutationContext);

handleApiRequest('Client', 'delete', `/users/${id}`)
   .then(async () => {
      mutate && (await mutate());
   .catch((err) => {
      handleApiError(err);
   });
})

/* Test */
const mockedMutate = jest.fn();
jest.mock('swr', () => ({
  __esModule: true,
  ...jest.requireActual('swr'),
  useSWR: jest.fn(() => ({
    mutate: () => mockedMutate,
  })),
}));


fireEvent.click(disableUser);

await waitFor(() => {
   expect(mockedMutate).toBeCalledTimes(10);
});

/* Result */
expect(jest.fn()).toBeCalledTimes(expected)

Expected number of calls: 10
Received number of calls: 0

Would appreciate any suggestions.

[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();