使用角色、testid 和类名反应渲染测试
React rendering test with role, testid and classname
我正在尝试测试反应渲染。据我所知,有几种方法可以找到我定义的元素。
- 角色
- 测试编号
- class姓名
- 查询选择器
我什么时候应该定义 'role' 或 'test id' 实例 class 名称,角色和测试 ID 之间有什么区别?
role 和 test id 有什么区别?
role
是一个 html 属性,用于可访问性和语义 html 结构。
test-id
是用于挂接到特定 DOM 节点进行测试的特殊 ID。它们通常是 data-X
属性,即 data-testid="test"
,但也可以是某些测试库的普通 id
属性。
您应该主要将角色用作应用程序可访问性策略的一部分,而不是用于测试。
我什么时候应该定义 class 名称的 'role' 或 'test id' 实例?
react-testing-library
查询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:
- Queries accessible to everyone (label/placeholder text, aria role, text, and display values)
- Semantic Queries (HTML5 and ARIA compliant selectors)
- Test IDs
Manual queries on the container (
container.querySelector
)
我正在尝试测试反应渲染。据我所知,有几种方法可以找到我定义的元素。
- 角色
- 测试编号
- class姓名
- 查询选择器
我什么时候应该定义 'role' 或 'test id' 实例 class 名称,角色和测试 ID 之间有什么区别?
role 和 test id 有什么区别?
role
是一个 html 属性,用于可访问性和语义 html 结构。
test-id
是用于挂接到特定 DOM 节点进行测试的特殊 ID。它们通常是 data-X
属性,即 data-testid="test"
,但也可以是某些测试库的普通 id
属性。
您应该主要将角色用作应用程序可访问性策略的一部分,而不是用于测试。
我什么时候应该定义 class 名称的 'role' 或 'test id' 实例?
react-testing-library
查询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:
- Queries accessible to everyone (label/placeholder text, aria role, text, and display values)
- Semantic Queries (HTML5 and ARIA compliant selectors)
- Test IDs Manual queries on the container (
container.querySelector
)