Tester ses composants React avec Testing Library : la bonne approche

React Testing Library a une philosophie simple : testez votre logiciel comme il est utilise. Cette philosophie change la facon d’ecrire des tests.

Le principe fondamental

// Mauvais : test d'implementation (fragile)
expect(wrapper.state('isLoading')).toBe(false);

// Bon : test de comportement utilisateur (robuste)
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
expect(screen.getByText('Chargement termine')).toBeInTheDocument();

Les queries dans l’ordre de preference

screen.getByRole('button', { name: /soumettre/i })    // 1. Role
screen.getByLabelText('Email professionnel')           // 2. Label
screen.getByPlaceholderText('votre@email.com')        // 3. Placeholder
screen.getByText('Connexion reussie')                  // 4. Texte
screen.getByTestId('submit-button')                    // 5. TestId

Tester les interactions asynchrones

test('soumettre le formulaire de connexion', async () => {
  const user = userEvent.setup();
  render(<LoginForm />);

  await user.type(screen.getByLabelText(/email/i), 'alice@example.com');
  await user.type(screen.getByLabelText(/mot de passe/i), 'secret');
  await user.click(screen.getByRole('button', { name: /se connecter/i }));

  await waitFor(() => {
    expect(screen.getByText('Connexion reussie')).toBeInTheDocument();
  });
});

Mocker les appels API avec MSW

export const handlers = [
  rest.post('/api/auth/login', (req, res, ctx) => {
    return res(ctx.json({ token: 'test-token' }));
  }),
];

const server = setupServer(...handlers);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

MSW intercepte les requetes HTTP au niveau reseau — vos tests passent exactement par le meme chemin que le code en production.

Notre formation React couvre les tests avec Testing Library et MSW.