AutoGineer
Generated banner for React18 Enzyme To Rtl
Generated logo for React18 Enzyme To Rtl

React18 Enzyme To Rtl

GitHubOfficialFirst committed by SaravananRajaramanDistributed by GitHub

  • Skill
  • Guidelines
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

Provides exact Enzyme → React Testing Library migration patterns for React 18 upgrades. Use this skill whenever Enzyme tests need to be rewritten - shallow, mount, wrapper.find(), wrapper.simulate(), wrapper.prop(), wrapper.state(), wrapper.instance(), Enzyme configure/Adapter calls, or any test file that imports from enzyme. This skill covers the full API mapping and the philosophy shift from implementation testing to behavior testing. Always read this skill before rewriting Enzyme tests - do not translate Enzyme APIs 1:1, that produces brittle RTL tests.
— the description by SaravananRajaraman

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a comprehensive guide for migrating legacy Enzyme tests to React Testing Library (RTL) in the context of React 18 upgrades. It emphasizes a fundamental shift in testing philosophy: moving away from testing internal component implementation details (like state, props, and instance methods) toward testing user-facing behavior. The guide includes API mapping, async handling patterns, and strategies for replacing Enzyme-specific concepts with accessible, user-centric RTL queries.

What it does

  • Maps common Enzyme APIs like shallow, mount, find, and simulate to their RTL equivalents.
  • Provides patterns for handling asynchronous operations and state updates without wrapper.update().
  • Explains the shift from implementation-based testing to behavior-driven testing.
  • Offers templates for rendering components and wrapping them with necessary providers.
  • Defines a priority order for RTL queries to ensure accessible and robust tests.
  • Advises on how to replace direct instance method calls with user-event interactions.

When to use it

  • When upgrading a React project to version 18 and needing to replace Enzyme.
  • When rewriting brittle tests that rely on internal component state or instance methods.
  • When you need to understand the correct RTL approach for complex async data fetching.
  • When you are unsure how to map specific Enzyme wrappers or find methods to RTL queries.

Advantages

  • Promotes the creation of more resilient tests that do not break during refactoring.
  • Ensures tests reflect actual user interactions rather than internal code structure.
  • Aligns testing practices with modern React 18 standards and accessibility best practices.
  • Reduces reliance on implementation-specific testing patterns.

Usage examples

“How do I replace wrapper.state('count') in my tests?”
The skill advises against testing state directly. Instead, you should assert that the rendered output reflects the state, such as using screen.getByText('Count: 3') to verify the UI.
“How do I handle async data loading that used wrapper.update()?”
The skill recommends using RTL's findBy* queries or waitFor, which automatically handle re-renders and wait for the DOM to update, replacing the need for manual flushing.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/github/react18-enzyme-to-rtl/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip react18-enzyme-to-rtl.zip -d .agents/skills

Documentation by SaravananRajaraman

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.

API Map

For complete before/after code for each Enzyme API, read:

  • references/enzyme-api-map.md - full mapping: shallow, mount, find, simulate, prop, state, instance, configure

  • references/async-patterns.md - waitFor, findBy, act(), Apollo MockedProvider, loading states, error states

Core Rewrite Template

// Every Enzyme test rewrites to this shape:
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('does the thing', async () => {
    // 1. Render (replaces shallow/mount)
    render(<MyComponent prop="value" />);

    // 2. Query (replaces wrapper.find())
    const button = screen.getByRole('button', { name: /submit/i });

    // 3. Interact (replaces simulate())
    await userEvent.setup().click(button);

    // 4. Assert on visible output (replaces wrapper.state() / wrapper.prop())
    expect(screen.getByText('Submitted!')).toBeInTheDocument();
  });
});

RTL Query Priority (use in this order)

  1. getByRole - matches accessible roles (button, textbox, heading, checkbox, etc.)

  2. getByLabelText - form fields linked to labels

  3. getByPlaceholderText - input placeholders

  4. getByText - visible text content

  5. getByDisplayValue - current value of input/select/textarea

  6. getByAltText - image alt text

  7. getByTitle - title attribute

  8. getByTestId - data-testid attribute (last resort)

Prefer getByRole over getByTestId. It tests accessibility too.

Wrapping with Providers

// Enzyme with context:
const wrapper = mount(
  <ApolloProvider client={client}>
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  </ApolloProvider>
);

// RTL equivalent (use your project's customRender or wrap inline):
import { render } from '@testing-library/react';
render(
  <MockedProvider mocks={mocks} addTypename={false}>
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  </MockedProvider>
);
// Or use the project's customRender helper if it wraps providers

Files

Requirements and compatibility

Written for: GitHub Copilot

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

First committed by
GitHub avatar of SaravananRajaramanSaravananRajaraman
Publisher
GitHub (Official)
Distributed by
GitHub
Source
github/awesome-copilot · skills/react18-enzyme-to-rtl · commit 797337f
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced
Contributors
SaravananRajaraman

AutoGineer is not affiliated with or endorsed by SaravananRajaraman or GitHub.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download react18-enzyme-to-rtl.zip