Parlez-nous de votre expérience en test dans des…

Dans mes projets, j'ai utilisé plusieurs types de tests pour assurer la qualité du frontend :

Tests unitaires : Avec Jest et React Testing Library pour isoler et vérifier des composants, fonctions et modules individuels. Cela aide à détecter rapidement les erreurs logiques dans de petites parties indépendantes du code.

// Exemple de test unitaire d'un composant Button avec Jest et React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('rend le bouton avec le texte correct', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Tests d'intégration : Pour vérifier l'interaction entre plusieurs composants ou modules. Cela aide à s'assurer que différentes parties du système fonctionnent correctement ensemble. J'ai également utilisé React Testing Library pour cela.

// Exemple de test d'intégration d'un formulaire et d'un bouton de soumission
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('la soumission du formulaire appelle onSubmit avec les bonnes données', () => {
  const mockSubmit = jest.fn();
  render(<Form onSubmit={mockSubmit} />);

  const input = screen.getByLabelText(/Username:/i);
  const submitButton = screen.getByRole('button', { name: /Submit/i });

  fireEvent.change(input, { target: { value: 'testuser' } });
  fireEvent.click(submitButton);

  expect(mockSubmit).toHaveBeenCalledWith({ username: 'testuser' });
});

Tests E2E : Dans certains projets, j'ai utilisé Cypress ou Playwright pour tester des scénarios utilisateur de bout en bout dans un navigateur réel. Cela permet de vérifier que l'application fonctionne globalement comme prévu pour l'utilisateur final.

// Exemple de test E2E avec Cypress
// cypress/integration/todo.spec.js
describe('Application Todo', () => {
  it('devrait ajouter un nouvel élément de tâche', () => {
    cy.visit('/'); // Aller à la page de l'application

    cy.get('.new-todo').type('Buy milk{enter}'); // Entrer du texte et appuyer sur Entrée

    cy.get('.todo-list li')
      .should('have.length', 1) // Vérifier le nombre d'éléments
      .first()
      .should('have.text', 'Buy milk'); // Vérifier le texte du premier élément
  });
});

Test de snapshot : Avec Jest, pour capturer la structure du composant et détecter des changements non intentionnels dans le rendu (par exemple, après un refactoring).

// Exemple de test de snapshot d'un composant Card avec Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card se rend correctement', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Comparaison avec la snapshot sauvegardée
});

Je considère que les tests sont une partie essentielle du processus de développement, car ils aident à maintenir la qualité du code, facilitent la refactorisation et réduisent la probabilité d'erreurs en production. Je pratique l'écriture de tests parallèlement au développement de nouvelles fonctionnalités ou avant la correction de bugs (approche TDD, lorsque cela est applicable).

Parlez-nous de votre expérience en test dans des projets.