Skip to content

Request for comments: Proposal for adding testing-library to cypress

James Jenkinson requested to merge proposal-e2e-tests-with-testing-library into main

Proposal: Introduce testing library to Cypress test suite

Why?

Disclaimer, this is very opinionated

The default Cypress queries have a couple problems with them:

  • They don't test for accessibility
  • They require too much knowledge of the DOM

Testing library introduces queries that query elements based on their accessible roles, and will fail if they are not met, for example

<button aria-label="Label" class="icon-button icon"></button>
<button>Label</button>
<div role="button" tabindex="-1">Label</button>
<input type="button" value="Label">

These could all be selected via testing library with: cy.findByRole('button', { name: 'Label' })

Wheras cypress would need four different selectors to get them

Another example

<a>Link to nowhere</a>

Here, you could try to select via cy.findByRole('link', { name: 'Link to nowhere' }), however, this test would fail, because the link is not accessible (as it's missing a href)

Merge request reports