1

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
  });
});

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.