Confused about render-result-naming-convention

[runoncedev]

I'm trying to use plugin:testing-library/react:

module.exports = {
  plugins: ['testing-library'],
  extends: ['plugin:testing-library/react'],
}

And I get an error on this line:

const screen = render(<MyComponent />)

screen is not a recommended name for render returned value. Instead, you should destructure it, or name it using one of: view, or utils

When I try destructuring I get an error when trying to use getByLabelText():

const { getByLabelText } = render(<MyComponent />)

expect(getByLabelText('Whatever')).toBeInTheDocument()

Avoid destructuring queries from render result, use screen.getByLabelText instead

Which seems to suggest that I use screen for the render() result, but wasn't that what the first error was complaining about?

Then I try naming it view or utils, but I get the same error:

const view = render(<MyComponent />)

expect(view.getByLabelText('Whatever')).toBeInTheDocument()

Which is odd because I'm not even destructuring.

Using eslint-plugin-testing-library@6.2.0 and @testing-library/react@12 (using an older version because I'm using react@17.0.2).

What I'm missing?

[Belco90]

screen is an object containing all the queries, exported by Testing Library.

The ideal way of rendering and querying would be:

import { render, screen } from '@testing-library/react'

render(<MyComponent />)

expect(screen.getByLabelText('Whatever')).toBeInTheDocument()