Migration Enzyme → RTL pour React 18

Enzyme n'a pas d'adaptateur React 18 et aucun chemin de support pour React 18. Tous les tests Enzyme doivent être réécrits en utilisant React Testing Library.

Le changement de philosophie (À lire en premier)

Enzyme teste l'implémentation. RTL teste le comportement.

// Enzyme: teste que le composant a le bon état interne
expect(wrapper.state('count')).toBe(3);
expect(wrapper.instance().handleClick).toBeDefined();
expect(wrapper.find('Button').prop('disabled')).toBe(true);

// RTL: teste ce que l'utilisateur voit réellement et peut faire
expect(screen.getByText('Count: 3')).toBeInTheDocument();
expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();

Ce n'est pas une traduction 1:1. Les tests Enzyme qui vérifient l'état interne ou les méthodes d'instance n'ont pas d'équivalents RTL - car RTL n'expose volontairement pas les internals. Réécrivez le test pour affirmer le résultat visible à la place.

Cartographie des API

Pour du code complet avant/après pour chaque API Enzyme, consultez :

• references/enzyme-api-map.md - cartographie complète : shallow, mount, find, simulate, prop, state, instance, configure
• references/async-patterns.md - waitFor, findBy, act(), Apollo MockedProvider, états de chargement, états d'erreur

Modèle de réécriture principal

// Chaque test Enzyme se réécrit selon cette forme :
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 (remplace shallow/mount)
    render(<MyComponent prop="value" />);

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

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

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

Priorité des requêtes RTL (utiliser dans cet ordre)

1. getByRole - correspond aux rôles accessibles (button, textbox, heading, checkbox, etc.)
2. getByLabelText - champs de formulaire liés à des labels
3. getByPlaceholderText - placeholders d'input
4. getByText - contenu textuel visible
5. getByDisplayValue - valeur actuelle d'input/select/textarea
6. getByAltText - texte alt des images
7. getByTitle - attribut title
8. getByTestId - attribut data-testid (dernier recours)

Privilégiez getByRole plutôt que getByTestId. C'est aussi un test d'accessibilité.

Enveloppe avec des Providers

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

// Équivalent RTL (utilisez le customRender de votre projet ou enveloppez inline) :
import { render } from '@testing-library/react';
render(
  <MockedProvider mocks={mocks} addTypename={false}>
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  </MockedProvider>
);
// Ou utilisez le helper customRender du projet s'il enveloppe les providers