Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unit test for useMutation hook 's can't be mocked to run onError callback #6683

Closed
ducle-infotrack opened this issue Jan 11, 2024 · 0 comments

Comments

@ducle-infotrack
Copy link

ducle-infotrack commented Jan 11, 2024

Describe the bug

Description

When running the unit test for the useMuation hook,
The mocked mutation function is expected to be throw error and onError callback is executed, but it appears to not be called at all.

Your minimal, reproducible example

VScode

Steps to reproduce

Steps to Reproduce

  1. Run the unit test for useMutation

  2. Observe the test results.

import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { useMutation } from 'react-query';

// Mock the useMutation hook from react-query
jest.mock('react-query');

// Custom hook that uses a mutation from react-query
const useCustomHook = () => {
  const mutation = useMutation((data) => {
    mutationFn: () => api.post(/* data */),
    onError: (err) => {
      toast({
        title: 'error',
        message: err.message,
      });
    },
  });

  return mutation;
};

describe('useCustomHook', () => {
  const mockMutation = jest.fn();

  beforeEach(() => {
    // Mock the return value of useMutation
    (useMutation as jest.Mock).mockReturnValue({ mutate: mockMutation });
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  it('should handle error when mutation fails', async () => {
    const TestComponent = () => {
      useCustomHook();
      return null; // render nothing
    };

    mount(<TestComponent />);

    const error = new Error('Mutation failed');

    mockMutation.mockImplementation(() => { // or mockRejecteValueOnce
      throw error;
    });

    await act(async () => {
      try {
        await mockMutation(data);
      } catch (err) {
        // Handle error
      }

    expect(mockError).toHaveBeenCalledWith({
      title: 'error',
      message: error.message,
    });
  });
});

Expected behavior

The mockError function should be called with the following arguments:

{
  "title": "error",
  "message": "Mutation failed"
}

How often does this bug happen?

  • Every run

Screenshots or Videos

No response

Platform

Node.js version: 18.18.2
NPM/Yarn version: 9.8.1
React version: 18
Testing library: Jest with Enzyme
Operating System: Ubuntu

Tanstack Query adapter

react-query

TanStack Query version

5.14.2

TypeScript version

5.3.3

Additional context

No response

@ducle-infotrack ducle-infotrack changed the title Unit test for useMutation hook can't be mocked Unit test for useMutation hook 's can't be mocked to run onError callback Jan 11, 2024
@TanStack TanStack locked and limited conversation to collaborators Jan 13, 2024
@TkDodo TkDodo converted this issue into discussion #6696 Jan 13, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant