React18 Enzyme To Rtl

If you're stuck migrating Enzyme tests to React Testing Library for a React 18 upgrade, this walks you through the entire API mapping and the bigger conceptual shift from implementation testing to behavior testing. It's not about translating wrapper.find() or wrapper.state() one to one, it's about rewriting tests to assert what users actually see instead of poking at component internals. You get concrete before and after examples for shallow, mount, simulate, and all the tricky async patterns with Apollo and loading states. The query priority guide alone will save you from littering tests with data-testid attributes. Covers the philosophy enough that you won't just produce brittle RTL code that still thinks like Enzyme.

skills.sh installs: 742
GitHub stars: 41K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add github/awesome-copilot --skill react18-enzyme-to-rtl --agent claude-code

Installs into .claude/skills of the current project.

Files

React 18 Enzyme → RTL Migration

Enzyme has no React 18 adapter and no React 18 support path. All Enzyme tests must be rewritten using React Testing Library.

The Philosophy Shift (Read This First)

Enzyme tests implementation. RTL tests behavior.

// Enzyme: tests that the component has the right internal state
expect(wrapper.state('count')).toBe(3);
expect(wrapper.instance().handleClick).toBeDefined();
expect(wrapper.find('Button').prop('disabled')).toBe(true);

// RTL: tests what the user actually sees and can do
expect(screen.getByText('Count: 3')).toBeInTheDocument();
expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();

This is not a 1:1 translation. Enzyme tests that verify internal state or instance methods don't have RTL equivalents - because RTL intentionally doesn't expose internals. Rewrite the test to assert the visible outcome instead.