Migração do Enzyme para RTL no React 18

O Enzyme não possui um adaptador para React 18 nem um caminho de suporte para React 18. Todos os testes do Enzyme devem ser reescritos usando a React Testing Library (RTL).

A Mudança de Filosofia (Leia Isso Primeiro)

Testes do Enzyme testam a implementação. Testes da RTL testam o comportamento.

// 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();

Esta não é uma tradução 1:1. Testes do Enzyme que verificam estado interno ou métodos de instância não têm equivalentes na RTL - porque a RTL intencionalmente não expõe os detalhes internos. Reescreva o teste para afirmar o resultado visível em vez disso.

Mapeamento de API

Para código completo antes/depois de cada API do Enzyme, leia:

• references/enzyme-api-map.md - mapeamento completo: shallow, mount, find, simulate, prop, state, instance, configure
• references/async-patterns.md - waitFor, findBy, act(), Apollo MockedProvider, estados de carregamento, estados de erro

Template de Reescruta Principal

// 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();
  });
});

Prioridade de Consultas da RTL (use nesta ordem)

1. getByRole - corresponde a papéis acessíveis (botão, caixa de texto, título, caixa de seleção, etc.)
2. getByLabelText - campos de formulário vinculados a rótulos
3. getByPlaceholderText - placeholders de input
4. getByText - conteúdo de texto visível
5. getByDisplayValue - valor atual de input/select/textarea
6. getByAltText - texto alternativo de imagem
7. getByTitle - atributo title
8. getByTestId - atributo data-testid (último recurso)

Prefira getByRole em vez de getByTestId. Isso também testa a acessibilidade.

Envolvendo com 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