Testing Library

Testing Library

  • Docs
  • Recipes
  • Help
  • Support Us
  • Blog

›Frameworks

Getting Started

  • Introduction
  • Guiding Principles

Frameworks

    DOM Testing Library

    • Introduction
    • Install
    • Example
    • Setup
    • Queries
    • Firing Events
    • Async Utilities
    • Helpers
    • Configuration
    • FAQ
    • Cheatsheet

    React Testing Library

    • Introduction
    • Example
    • Setup
    • API
    • FAQ
    • Cheatsheet

    Reason Testing Library

    • Introduction
    • Examples

    Native Testing Library

    • Introduction
    • Example
    • Setup
    • API

    Vue Testing Library

    • Introduction
    • Examples
    • Setup
    • API
    • Cheatsheet
    • FAQ

    Marko Testing Library

    • Introduction
    • Setup
    • API

    Angular Testing Library

    • Introduction
    • Examples
    • API

    Preact Testing Library

    • Introduction
    • Example
    • API
    • Learn

    Svelte Testing Library

    • Introduction
    • Setup
    • Example
    • API
  • Cypress Testing Library
  • Puppeteer Testing Library
  • Testcafe Testing Library
  • Nightwatch Testing Library

Ecosystem

  • user-event
  • jest-dom
  • bs-jest-dom
  • jest-native
  • react-select-event
  • eslint-plugin-testing-library
  • riot-testing-library
Edit

Cypress Testing Library

Cypress Testing Library allows the use of dom-testing queries within Cypress end-to-end browser tests.

npm install --save-dev cypress @testing-library/cypress
  • Cypress Testing Library on GitHub

Usage

Cypress Testing Library extends Cypress's cy commands.

Add this line to your project's cypress/support/commands.js:

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

With TypeScript

Typings are defined in @types/testing-library__cypress at DefinitelyTyped, and should be added as follows in tsconfig.json:

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

You can now use all of DOM Testing Library's getBy, getAllBy, queryBy and queryAllBy commands. See DOM Testing Library API for reference

Examples

You can find all library definitions here.

To show some simple examples (from https://github.com/testing-library/cypress-testing-library/tree/master/cypress/integration):

cy.findAllByText(/^Button Text \d$/)
  .should('have.length', 2)
  .click({ multiple: true })
  .should('contain', 'Button Clicked')
cy.queryByText('Button Text 1')
  .click()
  .should('contain', 'Button Clicked')
cy.queryByText('Non-existing Button Text', { timeout: 100 }).should('not.exist')
cy.queryByLabelText('Label 1')
  .click()
  .type('Hello Input Labelled By Id')
cy.get('#nested').within(() => {
  cy.queryByText('Button Text 2').click()
})
cy.get('#nested').then(subject => {
  cy.queryByText(/^Button Text/, { container: subject }).click()
})

Cypress Testing Library supports both jQuery elements and DOM nodes. This is necessary because Cypress uses jQuery elements, while DOM Testing Library expects DOM nodes. When you pass a jQuery element as container, it will get the first DOM node from the collection and use that as the container parameter for the DOM Testing Library functions.

Last updated on 9/25/2019
← APIPuppeteer Testing Library →
  • Usage
  • With TypeScript
  • Examples
Testing Library
Docs
Getting StartedExamplesAPIHelp
Community
BlogStack OverflowReactiflux on DiscordSpectrum
More
StarGitHubEdit Docs on GitHub
Copyright © 2018-2019 Kent C. Dodds and contributors