如何在react-testing-library中测试父子元素关联关系

下面分不同测试场景给出对应写法： #

原生DOM API实现（无测试库依赖） #

直接通过两次属性选择器限定范围即可：

// 第一步定位父元素
const genreParent = document.querySelector('div[name="genre"]');
// 第二步在父元素范围内匹配子元素
const targetChild = genreParent?.querySelector('a[value="35"]');
// 校验是否存在且文本符合要求
const isMatch = !!targetChild && targetChild.textContent.trim().startsWith('Comedy');

React Testing Library / Vue Testing Library 实现 #

用测试库自带的withinAPI限定查询范围，避免全局匹配到其他同文本元素：

// 先定位父级下拉容器
const genreDropdown = screen.getByRole('combobox', { name: 'genre' });
// 在父容器内查询目标子元素
const selectedComedyLabel = within(genreDropdown).getByText('Comedy');
// 校验属性匹配
expect(selectedComedyLabel).toHaveAttribute('value', '35');
// 直接判断存在性的写法
expect(within(genreDropdown).queryByText('Comedy')).toBeInTheDocument();

Cypress 端到端测试实现 #

Cypress原生支持链式查询，直接嵌套查找即可：

cy.get('div[name="genre"]')
  .find('a[value="35"]')
  .contains('Comedy')
  .should('exist');

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