Ir para o conteúdo principal

Cypress Testing Library

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Cypress Testing Library permite o uso de queries do dom-testing dentro de testes de navegador end-to-end do Cypress.

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

Como usar​

O Cypress Testing Library estende os comandos cy do Cypress.

Adicione esta linha ao cypress/support/commands.js do seu projeto:

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

Agora você pode usar alguns comandos findBy e findAllBy do DOM Testing Library diretamente no objeto global cy. Consulte a documentação About queries para referência.

Observação: as queries get* não são suportadas porque para testes Cypress eficientes você precisa de capacidade de repetição, e as queries find* já oferecem isso. As queries query* tornaram-se desnecessárias a partir da v5 e serão removidas na v6. As find* suportam totalmente as asserções nativas do Cypress (eliminando o único caso de uso para query*).

Com TypeScript​

As tipagens devem ser adicionadas assim no tsconfig.json:

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

Você pode encontrar todas as definições da biblioteca aqui.

Exemplos​

Alguns exemplos 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})
})

O Cypress Testing Library suporta tanto elementos jQuery quanto nós DOM. Isso é necessário porque o Cypress usa elementos jQuery, enquanto o DOM Testing Library espera nós DOM. Quando você passa um elemento jQuery como container, ele extrairá o primeiro nó DOM da coleção e usará esse como parâmetro container para as funções do DOM Testing Library.