equal-aqua
equal-aqua12mo 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
kapa.ai12mo 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
kapa.ai12mo ago
<@619660544319684609> kapa.ai is still learning and improving, please let us how it did by reacting below