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

Question

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?

Answer 1

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.

Answer 2

You can identify the element without mounting the react component. If you are testing your react app in isolation with the source code or writing functional UI test cases, you can consider a Cypress plugin called cypress-react-selector. It helps you identify web elements by component, props, and state even after the minification. You need to use React Dev Tool to identify the component names in that case.

Here is an example:

Suppose your react app:

const MyComponent = ({ someBooleanProp }) => (
  <div>My Component {someBooleanProp ? 'show this' : ''} </div>
)

const App = () => (
  <div id='root'>
    <MyComponent />
    <MyComponent someBooleanProp={true} />
  </div>
)

ReactDOM.render(<App />, document.getElementById('root'))

Then you can simply identify the react element like:

cy.react('MyComponent', { someBooleanProp: true })

So, you can try something like:

cy.react('Input',{defaultValue:"steve"}).should('exist');

Find more sample test here

Hope it will help!

Answer 3

Because getByText() method always returns the value of innerText and that is why when you specify <div defaultvalue='XYZ'/>, it doesn't work.

You can check this out in DevTools console as well...

<div id='name'>XYZ</div>
document.getElementById('name').innertText will return you XYZ