Another integration test example in React

May 4th, 2023

Here's another example of an integration test in React. This time using the react-testing-library:

Tip.test.tsx

it('tip taxi driver when you enjoyed the ride', async () => {
  const user = userEvent.setup()
  const fakeApiProvider = createTipApiProvider({
    tip: () => Promise.resolve(),
  });
 
  render(
    <MultiContextProvider providers={[fakeApiProvider]}>
      <PassengerTipPage />
    </MultiContextProvider>
  );
  await user.click(screen.getByRole('radio', '5 stars'));
  await user.type(screen.findByLabel('Tip'), '2');
  await user.click(screen.getByRole('button', 'Submit'));
 
  expect(screen.findByRole('form')).not.toBeInTheDocument();
  expect(screen.findByRole('heading')).toHaveTextContent('Thanks for the tip');
});

Minor user journey in the form of integration test

Awarding the driver a tip isn't critical for the business behind the taxi app. It's more of an edge case. Their main job is to simplify logistics for people, right?

The integration test fits best to assert trivial user journeys.

I'm curious, what is your experience testing the React app?
When do you use the unit, integration or E2E tests?

Discuss on LinkedIn