Testing-library调用getByText/toHaveTextContent无法匹配文本问题求助

问题根本原因 #

匹配失败是DOM元素内部的换行、连续空白字符导致的：
h4元素渲染后内部实际文本包含换行符、多个连续空格，和你断言里写的'Total Score- 0'（仅用单个空格分隔）结构不一致。getByText和toHaveTextContent默认执行严格匹配，会校验所有空白字符的格式，因此无法命中。

解决方案 #

• 方案1：使用内置配置忽略空白差异
  直接给toHaveTextContent开启normalizeWhitespace选项，工具会自动将所有连续空白、换行转换为单个空格后再匹配：

  expect(screen.getByTestId("Vaibhav_score")).toHaveTextContent('Total Score- 0', { normalizeWhitespace: true })
  

  如果你要用getByText匹配，也可以加同样的配置：

  const scoreEle = screen.getByText('Total Score- 0', { normalizeWhitespace: true, exact: false })
  

• 方案2：用正则匹配规避格式问题
  用\s+匹配任意数量的空白（包括换行、多空格），不需要修改配置：

  expect(screen.getByTestId("Vaibhav_score")).toHaveTextContent(/Total Score-\s+0/)
  

• 方案3：从根源消除多余空白
  你给出的JSX写法本身没有问题，出现文本折行大概率是父容器宽度不足、或者CSS没有限制折行导致的。你可以给h4添加white-space: nowrap的样式，保证文本始终在同一行渲染，就可以直接用原字符串做严格匹配。

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