national-gold•2y ago

Mock onError using Jest and React Testing Library

Hi everyone, need some help on how to mock the onError function. Basically I want to test the onError function if there's an error I want to test if the error displays? BTW I'm using react Toastify to display notification. any help is appreciated. thanks,

const handleSubmit = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    const payload = {......};

    mutate(
      {
        resource: 'project',
        values: payload,
        invalidates: ['all'],
      },
      {
        onSuccess: (data) => {
          if (data.data) {
            notify('Project created successfully');
          }
        },
        onError: (error) => {
          notifyError(error.response.data.errorMsg);
        },
      }
    );
  };

const handleSubmit = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    const payload = {......};

    mutate(
      {
        resource: 'project',
        values: payload,
        invalidates: ['all'],
      },
      {
        onSuccess: (data) => {
          if (data.data) {
            notify('Project created successfully');
          }
        },
        onError: (error) => {
          notifyError(error.response.data.errorMsg);
        },
      }
    );
  };

So far I managed to make the success notification

it('should clicked the button and display Project Objective created successfully', async () => {
    const setOpenModal = jest.fn();
    const { unmount } = renderWithToastify(
      <MyComponent setOpenModal={setOpenModal} />
    );
    const button = screen.getByRole('button');
    userEvent.click(button);
    expect(
      await screen.findByText('Project created successfully')
    ).toBeInTheDocument();
    unmount();
  });

it('should clicked the button and display Project Objective created successfully', async () => {
    const setOpenModal = jest.fn();
    const { unmount } = renderWithToastify(
      <MyComponent setOpenModal={setOpenModal} />
    );
    const button = screen.getByRole('button');
    userEvent.click(button);
    expect(
      await screen.findByText('Project created successfully')
    ).toBeInTheDocument();
    unmount();
  });

3 Replies

kapa.ai•2y ago

Hi @franzdev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To test the onError function, you can use Jest's mocking capabilities to simulate an error scenario. You would need to mock the mutate function to throw an error when called. This will trigger the onError function in your handleSubmit method, allowing you to test if the error notification is displayed correctly. Here's a basic example of how you can do this:

it('should display error notification when there is an error', async () => {
    // Mock the mutate function to throw an error
    const mockMutate = jest.fn().mockImplementation(() => {
        throw new Error('Mock error');
    });

    // Replace the real mutate function with the mock
    const originalMutate = mutate;
    mutate = mockMutate;

    const setOpenModal = jest.fn();
    const { unmount } = renderWithToastify(
      <MyComponent setOpenModal={setOpenModal} />
    );
    const button = screen.getByRole('button');
    userEvent.click(button);

    // Check if the error notification is displayed
    expect(
      await screen.findByText('Mock error')
    ).toBeInTheDocument();

    // Restore the original mutate function after the test
    mutate = originalMutate;

    unmount();
});

it('should display error notification when there is an error', async () => {
    // Mock the mutate function to throw an error
    const mockMutate = jest.fn().mockImplementation(() => {
        throw new Error('Mock error');
    });

    // Replace the real mutate function with the mock
    const originalMutate = mutate;
    mutate = mockMutate;

    const setOpenModal = jest.fn();
    const { unmount } = renderWithToastify(
      <MyComponent setOpenModal={setOpenModal} />
    );
    const button = screen.getByRole('button');
    userEvent.click(button);

    // Check if the error notification is displayed
    expect(
      await screen.findByText('Mock error')
    ).toBeInTheDocument();

    // Restore the original mutate function after the test
    mutate = originalMutate;

    unmount();
});

Please note that this is a simplified example and you might need to adjust it according to your actual implementation. Also, the error message ('Mock error') should match the one you expect to be displayed by your notifyError function. For more information on how to use Jest for mocking functions, you can refer to the Jest documentation (https://jestjs.io/docs/mock-functions). For more information on how to use React Toastify for notifications, you can refer to the React Toastify documentation (https://fkhadra.github.io/react-toastify/introduction/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@619660544319684609> kapa.ai is still learning and improving, please let us how it did by reacting below

national-gold•2y ago

you can mock entire hook and should give jest.fn to enError to assert. here is some examples: https://github.com/refinedev/refine/blob/next/packages/core/src/hooks/auth/useIsAuthenticated/index.spec.ts#L207 https://github.com/refinedev/refine/blob/next/packages/mantine/src/components/pages/error/index.spec.tsx#L12

Mock onError using Jest and React Testing Library

Did you find this page helpful?