测试库：不通过文本获取匹配项

Question

无论我使用什么 .getByText() 或 .toHaveTextContent() 我都无法 select 我的 Dom 元素中的文本如下所示：

<h4 data-testid={playerName + "_score"}>Total Score- {score || 0}</h4>

我在这里尝试运行通过 ID 进行测试：

expect(screen.getByTestId("Vaibhav_score")).toHaveTextContent('Total Score- 0')

不是当我看到浏览器时，我看到的是两行：

Total Score-
0

在测试控制台中类似：

 <div>
     <h4 data-testid="Vaibhav_score" >
                            Total Score-
                            0
     </h4>
 </div>

有人可以帮助我确定问题吗？

Answer 1

这可能是因为根据字符串呈现文本的方式。为什么不，你最好试试像这样的东西：

expect(screen.getByTestId("Vaibhav_score")).toHaveTextContent(/^Total Score- 0/)

此外，通过测试 ID 检索不应该是您的第一选择。也许更好的测试方法是：

expect(screen.getByText(/^Total Score-/)).toHaveTextContent(/^Total Score- 0/)

如果有帮助请告诉我

Testing-library: not picking up the match by text