Aller au contenu principal

Cypress Testing Library

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Cypress Testing Library permet d'utiliser les requêtes de test DOM dans les tests de navigateur de bout en bout Cypress.

npm install --save-dev cypress @testing-library/cypress

Utilisation​

Cypress Testing Library étend les commandes cy de Cypress.

Ajoutez cette ligne dans le fichier cypress/support/commands.js de votre projet :

import '@testing-library/cypress/add-commands'

Vous pouvez désormais utiliser certaines commandes findBy et findAllBy de DOM Testing Library via l'objet global cy. Consultez la documentation About queries pour référence.

Remarque : les requêtes get* ne sont pas prises en charge car les tests Cypress nécessitent une capacité de réessai, déjà offerte par les requêtes find*. Les requêtes query* sont devenues obsolètes depuis la v5 et seront supprimées dans la v6. Les requêtes find* prennent pleinement en charge les assertions intégrées de Cypress (éliminant ainsi le seul cas d'usage des requêtes query*).

Avec TypeScript​

Les typages doivent être ajoutés comme suit dans tsconfig.json :

{
  "compilerOptions": {
    "types": ["cypress", "@testing-library/cypress"]
  }
}

Vous trouverez toutes les définitions de la bibliothèque ici.

Exemples​

Quelques exemples simples (tirés de cypress/integration/find.spec.js) :

cy.findByRole('button', {name: /Jackie Chan/i}).click()
cy.findByRole('button', {name: /Button Text/i}).should('exist')
cy.findByRole('button', {name: /Non-existing Button Text/i}).should('not.exist')
cy.findByLabelText(/Label text/i, {timeout: 7000}).should('exist')

// findByRole _inside_ a form element
cy.get('form')
  .findByRole('button', {name: /Button Text/i})
  .should('exist')
cy.findByRole('dialog').within(() => {
  cy.findByRole('button', {name: /confirm/i})
})

Cypress Testing Library prend en charge à la fois les éléments jQuery et les nœuds DOM. Cette fonctionnalité est nécessaire car Cypress utilise des éléments jQuery tandis que DOM Testing Library attend des nœuds DOM. Lorsqu'un élément jQuery est passé comme container, le premier nœud DOM de la collection est récupéré et utilisé comme paramètre container pour les fonctions de DOM Testing Library.