What do you think about providing Cypress and RTL test selector functions along side your components?

• Grafana

  379 60,279 10.0 TypeScript

  The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.

  

At Grafana we have a separate selectors package, which is basically what you're describing - a collection of selectors used in tests to match elements. The selectors are assigned via `aria-label` (old approach) or `data-testid` (new way) attributes. However, they are mostly used in Cypress e2e tests and not so much in RTL tests (altho that is possible too). I'd advice against using this for RTL unit tests in most cases because while this seems more convenient, you're losing a lot of the advantages of RTL. As one example, when you do `screen.getByRole({'button', {name: 'Submit'})`, you're also testing that your button is accessible to screen readers, if you're unable to match your button with this query (or a similar one) then most likely smth is wrong with your button.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project