Saltar al contenido principal

Cypress Testing Library

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Cypress Testing Library permite utilizar consultas de pruebas DOM en pruebas de navegación de extremo a extremo de Cypress.

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

Uso​

Cypress Testing Library extiende los comandos cy de Cypress.

Agrega esta línea al archivo cypress/support/commands.js de tu proyecto:

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

Ahora puedes usar algunos comandos findBy y findAllBy de DOM Testing Library directamente desde el objeto global cy. Consulta la documentación About queries como referencia.

Nota: las consultas get* no son compatibles porque para pruebas de Cypress razonables necesitas reintentos, y las consultas find* ya lo soportan. Las consultas query* ya no son necesarias desde la v5 y se eliminarán en la v6. Las consultas find* soportan completamente las aserciones integradas de Cypress (eliminando el único caso de uso para query*).

Con TypeScript​

Las definiciones de tipos deben agregarse así en tsconfig.json:

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

Puedes encontrar todas las definiciones de la biblioteca aquí.

Ejemplos​

Para mostrar ejemplos simples (extraídos 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 soporta tanto elementos jQuery como nodos DOM. Esto es necesario porque Cypress usa elementos jQuery, mientras que DOM Testing Library espera nodos DOM. Cuando pasas un elemento jQuery como container, obtendrá el primer nodo DOM de la colección y lo usará como parámetro container para las funciones de DOM Testing Library.