React-testing-library: getByRole('textbox') cannot find <input /> html element in v9.5.0

Created on 11 Mar 2020 · 1Comment · Source: testing-library/react-testing-library

@testing-library/react version: 9.5.0
react version: 16.12.0
node version: 10.16.0
yarn version: 1.17.3

Relevant code or config:

const inputProps = {
    name: 'test',
    label: 'Enter your name',
}

test('You should be able to type in the input and see the text', () => {
    const textToType = 'Hello, World!'
    const { getByRole } = render(<Input {...inputProps} />)
    userEvent.type(getByRole('textbox'), textToType)
    expect(getByRole('textbox')).toHaveAttribute('value', textToType)
})

What you did:

After upgrading to 9.5.0, tests using `getByRole('textbox') are unable to locate the html element.

What happened:

Unable to find an accessible element with the role "textbox"

Here are the accessible roles:

  document:

  Name "":
  <body />

  --------------------------------------------------

<body>
  <div>
    <div
      class="Inputstyles__Field-ml9srx-3 gUrUvl"
    >
      <div
        class="Inputstyles__InputWrapper-ml9srx-2 bKKQul"
      >
        <input
          class="Inputstyles__StyledInput-ml9srx-1 ezsCsI"
          id="ECJHn78Lr"
          name="test"
          value=""
        />
        <label
          class="Inputstyles__StyledLabel-ml9srx-0 VKxRB"
          for="ECJHn78Lr"
        >
          Enter your name
        </label>
      </div>
    </div>
  </div>
</body>

Source