React Testing Library：如何匹配含子锚标签文本的完整字符串？

React Testing Library 的 getByText 默认仅匹配单个DOM节点的文本内容，而你要找的文本分散在父 <div> 和子 <a> 两个节点中，直接用正则匹配完整字符串自然无法命中。

方法1：通过回调函数匹配完整文本 #

利用 getByText 的回调参数，获取元素的完整 textContent 进行验证：

screen.getByText((_, element) => {
  const fullText = element.textContent.trim();
  return /hey im some text with a link/i.test(fullText);
});

方法2：先定位部分文本节点，再验证完整内容 #

先找到包含部分文本的节点，再获取其父元素并检查完整文本：

// 定位包含部分文本的节点
const partialNode = screen.getByText(/hey im some text/i);
// 获取父div元素
const parentDiv = partialNode.closest('div');
// 验证完整文本内容
expect(parentDiv.textContent.trim()).toMatch(/hey im some text with a link/i);

方法3：结合角色查询匹配合并文本 #

如果父元素有合适的ARIA角色，getByRole 的 name 参数会自动合并子元素的文本内容，可直接匹配：

screen.getByRole('generic', { name: /hey im some text with a link/i });

注：<div> 默认的ARIA角色是 generic，若你的元素有自定义角色，替换为对应值即可。

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