React Testing Library无法访问表格<th>元素问题求助

先修正测试代码的角色匹配错误 #

你用screen.getAllByRole('th')是错误的，HTML里的<th>元素对应的隐式ARIA角色是columnheader，而非th。Testing Library的getByRole方法查找的是ARIA角色，不是HTML标签名。

把测试代码里的断言改成以下两种方式之一即可：

1. 通过ARIA角色查找：

expect(screen.getAllByRole('columnheader')).toHaveLength(6)

2. 直接通过HTML标签查找（更直接，适合验证标签存在数量）：

expect(screen.getAllByTagName('th')).toHaveLength(6)

排查组件渲染的实际问题 #

从你给出的DOM结构来看，实际渲染出的<th>只有3个，而且第三个还存在未闭合的语法错误——这说明你的Table组件本身就没渲染出预期的6个表头，和测试代码无关。你需要：

• 检查Table组件的表头数据源：是否传入了包含6个字段的表头数据？
• 排查组件内部的渲染逻辑：有没有循环渲染表头时提前终止、或数据被意外过滤的情况？
• 修复第三个<th>未闭合的语法错误，这会导致DOM解析异常，可能影响后续元素的识别。

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