如何使用RTL断言组件结构？嵌套列表与表格场景解析

一、嵌套列表的结构断言 #

对于多层嵌套的有序/无序列表，可通过范围限定查询和DOM层级验证来确认文本所处的嵌套层级：

1. 缩小查询范围定位层级 #

先找到目标层级的列表容器，再在该容器内查询目标文本，确保文本属于指定层级：

// 示例：验证"二级子项"位于第二层嵌套列表中
const rootList = screen.getByRole('list');
// 获取根列表下的第一层嵌套列表
const firstNestedList = within(rootList).getByRole('list');
// 在第一层嵌套列表内查询目标文本，确认层级
expect(within(firstNestedList).getByText('二级子项')).toBeInTheDocument();

2. 直接验证DOM层级关系 #

通过元素的祖先链断言嵌套结构，明确文本所在的层级位置：

const targetText = screen.getByText('二级子项');
// 断言目标文本的父元素是li，且该li的父元素为第二层ul
expect(targetText.closest('li')?.parentElement).toHaveTagName('ul');
// 进一步验证第二层ul的父元素是根列表的li
expect(targetText.closest('ul')?.parentElement).toHaveTagName('li');

二、嵌套数据表格的结构验证 #

针对嵌套表格，同样可以通过范围查询和DOM结构断言确保层级正确：

1. 按父容器定位嵌套表格 #

先定位到父表格的目标行/单元格，再在该范围内查询嵌套表格的内容：

// 示例：验证父表格某行下的嵌套表格包含指定内容
const parentRow = screen.getByRole('row', { name: '父行数据ID:123' });
const nestedTable = within(parentRow).getByRole('table');
expect(within(nestedTable).getByText('嵌套表格单元格内容')).toBeInTheDocument();

2. 断言表格的嵌套DOM结构 #

通过验证元素的DOM路径，确认嵌套表格的层级关系：

const nestedCell = screen.getByText('嵌套表格单元格内容');
// 断言该单元格属于嵌套表格，且嵌套表格位于父表格的单元格内
expect(nestedCell.closest('table')?.parentElement).toHaveTagName('td');
expect(nestedCell.closest('table')?.parentElement?.parentElement).toHaveTagName('tr');

三、通用实践技巧 #

• 优先使用角色查询（getByRole），比标签查询更符合可访问性标准，测试也更稳定。
• 用within()方法缩小查询范围，避免全局查询的歧义问题。
• 结合jest-dom扩展断言（如toHaveTagName、toHaveClass），更便捷地验证元素属性与层级。

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