Jest中screen.getByText无法识别已渲染可见文本问题求解

问题原因排查及解决方案 #

核心原因（90%以上概率属于这类问题）

getByText 默认执行精确全匹配，会严格校验文本的每一个字符，包括看不见的换行符、多余空格、标点符号差异、不可见特殊字符，同时默认仅匹配单个文本节点的内容，只要有一处不匹配就会查找失败，和肉眼看到的渲染效果无关。

你遇到的情况大概率属于以下两种场景之一：

• 你修改的prompts.contactUs文案存在隐形的格式差异：比如data文件里写文案时不小心加了换行、首尾空格、多打了一个末尾句号，或者文案中间有多余的制表符。而浏览器渲染时会自动合并连续的空白字符，所以你肉眼看DOM里的文本是正常的，但实际字符串和prompts.contactUs的值不完全一致。
• 这段文案在DOM里被拆成了多个独立的文本节点：比如你用了国际化插值、条件渲染拼接文本，哪怕最终渲染在同一个<p>标签里，getByText默认的单节点匹配规则也识别不出拼接后的完整文本。

解决方法

1. 先做基础校验
   打印prompts.contactUs的实际值，和DOM里的文本逐字符对比，确认是否有标点、空格、换行的差异，修改prompts里的文案和实际渲染内容完全一致即可解决。
2. 用模糊匹配规避格式差异
   不需要严格匹配时，可以给getByText加exact: false参数，自动忽略大小写、空白符差异：

   expect(screen.getByText(prompts["contactUs"], { exact: false }))
   

3. 匹配元素完整文本内容（适配多文本节点场景）
   用自定义匹配函数直接比对元素的完整textContent，不管内部节点拆分结构都能匹配：

   expect(screen.getByText((_, element) => element.textContent === prompts.contactUs))
   

为什么用data-testid就能正常通过？

data-testid是直接匹配元素的属性值，和文本内容、内部节点结构完全无关，所以不会受上述文本匹配的规则限制。

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