Cypress Component Testing

React 🟡 Mid

Definition

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 piece de voiture sur un banc d'essai reel 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) necessitant un vrai navigateur.

#testing#e2e