CODEWITHSUNDEEP
reactjsreact-testing-library
DK2
DK2

Reputation: 661

React rendering test with role, testid and classname

I'm trying to test react rendering. As I known, There is several method to find elements that I defined.

  1. role
  2. test id
  3. class name
  4. query selector

When should I define 'role' or 'test id' instance of class name, and What is differnce between role and test id?

Upvotes: 2

Views: 2208

Answers (1)

Drew Reese
Drew Reese

Reputation: 202801

What is difference between role and test id?

A role is a html attribute used in accessibility and semantic html structures.

WAI-ARIA Roles

test-id are special id's used to hook onto a specific DOM node for testing. They are typically a data-X attribute, i.e. data-testid="test", but could also be plain id attributes for some testing libraries.

You should primarily use roles as part of your applications accessibility strategy, not for testing.

When should I define 'role' or 'test id' instance of class name?

react-testing-library query cheatsheet What Query Should I Use?

Based on the Guiding Principles, your test should resemble how users interact with your code (component, page, etc.) as much as possible. With this in mind, we recommend this order of priority:

  1. Queries accessible to everyone (label/placeholder text, aria role, text, and display values)
  2. Semantic Queries (HTML5 and ARIA compliant selectors)
  3. Test IDs Manual queries on the container (container.querySelector)

Upvotes: 7

Related Questions