Migrating Sentry’s Front‑end Tests from Enzyme to React Testing Library
At Sentry, the team documented a year‑and‑four‑month effort to replace Enzyme with React Testing Library across thousands of tests, detailing the motivations, migration strategy, performance challenges, tooling changes, and the eventual benefits such as improved accessibility, reduced reliance on React internals, and a more maintainable test suite.
At Sentry we practice continuous delivery, merging code to the main branch and releasing immediately, which enables rapid iteration and automated testing of a large React codebase.
This article describes a 1‑year‑4‑month effort involving 17 engineers to migrate 803 test suites (4,937 tests) from Enzyme to React Testing Library (RTL).
RTL is a library that tests components by interacting with the DOM rather than using React internals, and has become the de‑facto standard for React component testing.
Initially the team evaluated RTL but did not adopt it because Enzyme met their needs and the upcoming React 17 migration raised concerns.
When React 17 introduced the new JSX transform, the need to move away from Enzyme grew, especially since Enzyme lacked support for React 18 and hooks.
Key benefits of switching to RTL include: no reliance on React internals, continued support for future React versions, better accessibility testing with role‑based queries, automatic cleanup, and avoidance of Enzyme‑specific pitfalls.
The migration plan mirrored the earlier TypeScript migration: prepare tooling, train developers, write new tests with RTL, and iteratively convert existing tests, targeting about eight files per week, aiming for completion by early 2023.
Challenges encountered were performance regressions with getByRole on large components, slow userEvent.type simulations, expensive getComputedStyle calls, missing ARIA roles, and tests that depended on component state.
Solutions included caching query results, using userEvent.paste or fireEvent , mocking getComputedStyle , adding ARIA roles or test IDs, and removing obsolete tests.
Example code before and after the migration demonstrates the JSX transform and the change from Enzyme’s mount to RTL’s render :
import React from 'react'
export function App() {
return
Hello World
} import { jsx as _jsx } from 'react/jsx-runtime'
export function App() {
return _jsx('h1', { children: 'Hello world' })
}Another example shows an Enzyme test converted to RTL:
it('renders', function () {
const wrapper = mountWithTheme(
)
expect(wrapper).toSnapshot();
}); it('renders', function () {
const {container} = render(
)
expect(container).toSnapshot();
});A Slack bot was built to report migration progress, keeping the team motivated as the conversion proceeded.
The actual timeline matched the estimate: after 1 year 4 months, 644 files were migrated, achieving the goal.
In conclusion, while test execution speed did not dramatically improve, RTL brought better maintainability, accessibility, and confidence in the front‑end test suite.
Sohu Tech Products
A knowledge-sharing platform for Sohu's technology products. As a leading Chinese internet brand with media, video, search, and gaming services and over 700 million users, Sohu continuously drives tech innovation and practice. We’ll share practical insights and tech news here.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.