I have a React component that uses a simple hook from React Query. I'm creating unit tests with Vitest, and I need to verify if the component is being rendered with the correct information based on the data returned from the endpoint(a parameter will affect the results).
If I run the tests separately, they run without issues. However, when I try to run both tests together, only one of the tests passes, and the other fails.
I’m clearing all the mocks before each test, but it seems like the data from the previous test is not being cleared and is affecting the results.
const renderComponent = () =>
render(
<UserInformationComponent />,
{ wrapper: createWrapper() }
);
describe('UserInformationComponent', () => {
beforeEach(() => {
vi.clearAllMocks();
});
it('first test', async () => {
vi.mock('../../useInformationQuery', () => ({
default: (type: string) => {
return [
{
data: { returns data type 1 based on type }
}
];
}
}));
renderComponent();
...assertions
});
it('second test', async () => {
vi.mock('../../hooks/useInformationQuery', () => ({
default: (type: string) => {
return [
{
data: { returns data type 2 based on type }
}
];
}
}
}));
renderComponent();
...assertions
});
});