Skip to content

A comparison of our current React test libraries

Warren Gifford requested to merge tr/comparing-react-test-libs into main

Created by: umpox

Example PR to compare react-test-render, enzyme and @testing-library/react

Or, reasons why we should use @testing-library/react!

Note for reader: We currently use three different React testing libraries in our codebase. Frontend Platform want to change this so we only need one. This will mean our tests are more consistent and it becomes a lot easier to share testing utils and patterns across components.

We believe we should write tests that match how a user would interact with our application.

What this means: Rendering full user journeys. Accessing components through their accessible roles. Triggering functions like onClick through simulating actual clicks in a browser. It means we should be able to write our tests with minimal knowledge of internal functionality - we only focus on browser inputs and outputs.

What this doesn't mean: Accessing component internals. Snapshotting entire component trees. Shallow rendering. Testing components in isolation.

We believe @testing-library/react (React Testing Library) is the best solution for this.

See comments further down this PR for examples of the differences between each library.

For further context, see this issue https://github.com/sourcegraph/sourcegraph/issues/24986

Linked to: https://github.com/sourcegraph/sourcegraph/issues/24986

Merge request reports