Utilisation de Cypress pour écrire des tests pour une application React

Le test de bout en bout (E2E) vérifie le flux d'application du début à la fin. Au lieu de tests manuels, l'intégration continue (CI) automatise ce processus. Écrivez du code, enregistrez-le et laissez les outils s'assurer qu'il ne rompt pas les fonctionnalités existantes. Cypress est un puissant cadre de test E2E qui simplifie ce processus, en particulier pour les bibliothèques JavaScript modernes comme React.

Configuration d'une application de test

Ce didacticiel utilise un exemple d'application TODO. Clone le référentiel à suivre:

 Git Clone [Protégé par e-mail]: kinsomicrote / cypress-react-tutorial.git

Accédez au répertoire et installez les dépendances:

 cd cypress-réact-tutorial
Installation du fil

Installer Cypress:

 fil Ajouter du cyprès --dev

Cyprès ouvert:

 node_modules / .bin / cypress ouvert

Pour un accès plus facile, ajoutez ce script à package.json :

 "scripts": {
  "Cypress": "Cypress Open"
}

Maintenant, exécutez yarn cypress pour ouvrir le cyprès. Démarrez l'application React avec yarn start pour voir l'application.

Créons un test de base dans cypress/integration/init.spec.js :

 décrire ('cypress', () => {
  it ('fonctionne', () => {
    attendre (vrai) .to.equal (true);
  });
});

Cela confirme que Cypress fonctionne. Maintenant, testons la visite de l'application:

 it ('visite l'application', () => {
  cy.Visit ('http: // localhost: 3000');
});

Pour éviter de répéter l'URL, définissez une URL de base dans cypress.json :

 {
  "BUSURL": "http: // localhost: 3000"
}

Le test peut désormais être simplifié à:

 it ('visite l'application', () => {
  cy.Visit ('/');
});

Tester les contrôles et entrées de formulaire

Créez cypress/integration/form.spec.js pour tester l'interaction utilisateur.

 décrire ('form', () => {
  AVANTEACH (() => {
    cy.Visit ('/');
  });

  it ('concentre l'entrée', () => {
    cy.foccused (). devraient ('have.class', 'form-control');
  });

  it ('accepte l'entrée', () => {
    const input = "Renseignez-vous sur Cypress";
    cy.get ('. Form-Control')
      .Type (entrée)
      .Should ('have.value', entrée);
  });

  it ('affiche la liste de todos', () => {
    cy.get ('li'). devrait ('have.length', 2);
  });

  it ('ajoute un nouveau todo', () => {
    const input = "Renseignez-vous sur Cypress";
    cy.get ('. Form-Control')
      .Type (entrée)
      .Type ('{enter}')
      .get ('li')
      .Should ('have.length', 3);
  });

  it ('supprime a tood', () => {
    cy.get ('li')
      .d'abord()
      .find ('. btn-danger')
      .Click ()
      .get ('li')
      .Should ('have.length', 1);
  });

  it ('supprime tous les todos', () => {
    cy.get ('li')
      .d'abord()
      .find ('. btn-danger')
      .Click ()
      .get ('li')
      .d'abord()
      .find ('. btn-danger')
      .Click ()
      .get ('. sans tâche')
      .Should ('have.text', 'Toutes vos tâches sont complètes. Joliment fait!');
  });
});

Ces tests couvrent la mise au point de l'entrée, l'acceptation des entrées, le nombre initial de TODO, l'ajout d'un nouveau TODO, la suppression d'un seul TODO et la suppression de tous les todos.

Tester les demandes de réseau

Tester les demandes de réseau garantit que la récupération des données fonctionne correctement. Par exemple, en utilisant l'API JSON Planolholder:

 décrire ('request', () => {
  il ('affiche des utilisateurs aléatoires de l'API', () => {
    cy.request ('https://jsonplaceholder.typicode.com/users')
      .Should ((réponse) => {
        attendre (réponse.status) .to.eq (200);
        attendre (réponse.body) .to.have.length (10);
        attendre (réponse) .to.have.property («en-têtes»);
        attendre (réponse) .to.have.property («durée»);
      });
  });
});

Cela vérifie l'état de la réponse de l'API, la longueur des données et les propriétés de réponse.

Exécution des tests à partir de la ligne de commande

Exécutez des tests de cyprès à partir du terminal:

 NPX Cypress Run

Pour exécuter des tests spécifiques:

 NPX CYPRESS RUN - SPEC "CYPRESS / INTERGATION / FORM.Spec.js"

Cela fournit un résumé de ligne de commande des résultats des tests. Reportez-vous à la documentation Cypress pour des options de ligne de commande plus avancées.

Conclusion

Cypress simplifie les tests E2E, ce qui le rend accessible et bénéfique pour les développeurs. Ce tutoriel démontre des techniques de test de base aux intermédiaires, vous encourageant à explorer davantage ses capacités. N'oubliez pas de consulter la documentation Cypress pour des fonctionnalités et les meilleures pratiques plus avancées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!