Use recommended pattern in testing example

[htunnicliff]

Since the official linter for React Testing Library (eslint-plugin-testing-library) recommends using screen to write queries, this MR updates the Testing Library example to follow the pattern recommended by the linter.

DOM Testing Library (and other Testing Library frameworks built on top of it) exports a screen object which has every query (and a debug method). This works better with autocomplete and makes each test a little simpler to write and maintain.

This rule aims to force writing tests using built-in queries directly from screen object rather than destructuring them from render result. Given the screen component does not expose utility methods such as rerender() or the container property, it is correct to use the render returned value in those scenarios.

See the prefer-screen-queries rules docs for more info: https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-screen-queries.md

Documentation / Examples

• Make sure the linting passes

[leerob]

Could you update the corresponding example as well? Thank you!

[htunnicliff]

@leerob will do!

Are there any plans to incorporate the recommended linter(s) for Testing Library and Cypress, either as standalone dependencies in examples or within next lint itself?

[leerob]

I like the idea of extending the default ESLint setup on the example to include this package! 👍

[htunnicliff]

@leerob I added linting configuration and updated the example test. For clarity, I also swapped in the name "Home" for the tests, since the example is not testing the App but rather the Home component. I also updated the name of testing-library.js to index.test.jsx, which more closely matches real-world test file names.

[delbaoliveira]

Hey @htunnicliff, thank you for submitting this PR and updating the example! 💪🏼

[htunnicliff]

@delbaoliveira from my end it looks like this PR is still marked as having "requested changes." Is there anything else I should do to help get this merged?

[leerob]

Thank you so much!

[leerob]

Looking like linting is failing here, which is why it didn't auto merge.