reactjscypresse2e-testingcypress-testing-library

Cypress + Dom Testing Library: getByText does not find input's value

I'm using Cypress with Cypress Testing Library to test my React application.

I have an input with a name ('Steve') as its value and I'm trying to find it with cypress like this:

// In the component:
<input defaultValue="steve" />

// In the spec file:
cy.getByText(/steve/i).should('exist');

But Cypress does not find this element and the test fails. If I change the input to a div:

<div>Steve</div>

it works (but I need to render an input). How can Cypress (and Dom Testing Library) find input's values?

Solution

  • I found the answer. getByText() does not find values of <input />. getByDisplayValue() does. I don't like that, because that makes it a little dependent on implementation details, but at least this fixes the tests.