React Testing Library如何通过data-test属性（非data-testid）查询元素

方案1：全局修改testId匹配规则（推荐，全项目统一用data-test时用） #

Testing Library支持自定义默认testId对应的属性名，直接在测试初始化配置文件（比如Jest配置里setupFilesAfterEnv指定的启动文件）中添加如下配置即可：

import { configure } from '@testing-library/react';

configure({
  // 将默认匹配的data-testid替换为data-test
  testIdAttribute: 'data-test'
})

配置完成后，你原有代码里的screen.findByTestId(...)会自动匹配data-test属性的元素，不需要修改任何查询逻辑，使用体验和之前完全一致。

方案2：单次查询自定义属性（临时场景使用，无需修改全局配置） #

如果只是个别场景需要查询data-test或其他自定义属性，不需要改动全局配置，可以直接利用findBy的异步查询本质（findBy本身就是waitFor+同步查询的语法糖），结合原生DOM选择器实现：

import { render, screen, waitFor } from '@testing-library/react';

// 异步查询data-test属性为target-value的元素
const targetElement = await waitFor(() => {
  const el = screen.container.querySelector('[data-test="target-value"]');
  if (!el) throw new Error('未找到匹配data-test属性的元素');
  return el;
})

如果需要同步查询，直接去掉waitFor包裹，使用querySelector判断即可，逻辑和getBy/queryBy规则一致：找不到元素时抛出错误对应getBy的行为，返回null对应queryBy的行为。

说明：screen对象上没有挂载findByAttribute方法是框架有意设计的，官方优先推荐按可访问性角色、可见文本、表单标签等用户实际能感知的维度查询元素，自定义属性查询属于兜底方案，仅在其他查询方式无法满足需求时使用即可。

内容的提问来源于stack exchange，提问作者eugenekr