Testing-library: not picking up the match by text

Question

No matter what I use .getByText(), or .toHaveTextContent() I am unable to select the text inside my Dom element which looks like this :

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

Here I am trying to run the test By ID :

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

Not when I see the browser, I see it in two lines like :

Total Score-
0

and similary in the testing console :

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

can someone help me in identifying the issue?

Answer 1

That's probably because of the way the text is been rendered against the string. why no you better try with something like:

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

Also, retrieving by test Id is shouldn't be your first option. Maybe a better way to test it could be:

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

let me know if it helps