Cypress Component Testing

React 🟡 Mid

Définition

Mode de test Cypress qui monte des composants React dans un vrai navigateur, permettant des tests visuels et d'interaction sans lancer toute l'application.

Analogie

Comme tester une pièce de voiture sur un banc d'essai réel au lieu d'une simulation informatique.

Exemple de code

import { mount } from 'cypress/react';

it('affiche le compteur', () => {
  mount(<Counter initial={5} />);
  cy.get('[data-testid="count"]').should('have.text', '5');
  cy.get('button').click();
  cy.get('[data-testid="count"]').should('have.text', '6');
});

Cas d'usage

Tests d'interaction complexes (drag & drop, animations) nécessitant un vrai navigateur.

#testing#e2e

← → au clavier pour passer d'une fiche à l'autre