时间戳

首页 > 解决方案 > 使用角色、testid 和类名反应渲染测试

reactjs - 使用角色、testid 和类名反应渲染测试

问题描述

我正在尝试测试反应渲染。据我所知，有几种方法可以找到我定义的元素。

  1. 角色
  2. 测试编号
  3. 班级名称
  4. 查询选择器

我什么时候应该定义类名的“角色”或“测试ID”实例，角色和测试ID有什么区别？

标签： reactjsreact-testing-library

解决方案

角色和测试ID有什么区别？

Arole是用于可访问性和语义 html 结构的 html 属性。

WAI-ARIA 角色

test-id是用于挂钩到特定 DOM 节点以进行测试的特殊 id。它们通常是一个data-X属性，即data-testid="test"，但也可以是id某些测试库的普通属性。

您应该主要将角色用作应用程序可访问性策略的一部分，而不是用于测试。

我什么时候应该定义类名的“角色”或“测试ID”实例？

react-testing-library查询备忘单 我应该使用什么查询？

根据指导原则，您的测试应尽可能类似于用户与您的代码（组件、页面等）的交互方式。考虑到这一点，我们推荐以下优先顺序：

  1. 每个人都可以访问的查询（标签/占位符文本、咏叹调角色、文本和显示值）
  2. 语义查询（符合 HTML5 和 ARIA 的选择器）
  3. 测试 ID 手动查询容器 ( container.querySelector)

推荐阅读