react-testing-library
react-testing-library copied to clipboard
testing-library
getByText not working for multiline text
-
@testing-library/reactversion: 13.3.0 - Testing Framework and version:[email protected]
- DOM Environment:[email protected] jest-environment-jsdom@^27.5.1
Using multiline text in getByText fails. Is there a workaround for this?
Failing test
const exampleText = `
hello
world
`
const textElement = screen.getByText(
exampleText.slice(0, 10),
{ exact: false }
);
console.info(textElement.textContent === exampleText); // == True
expect(screen.getByText(exampleText)).toBeInTheDocument(); // == Fail
Passing test
const exampleText = `hello world`
const textElement = screen.getByText(
exampleText.slice(0, 10),
{ exact: false }
);
console.info(textElement.textContent === exampleText); // == True
expect(screen.getByText(exampleText)).toBeInTheDocument(); // == Pass
I found a workaround here: https://stackoverflow.com/questions/55509875/how-to-query-by-text-string-which-contains-html-tags-using-react-testing-library/56859650#56859650 Not sure if this is a bug or by design though.
I realise I'm commenting on an old issue here but given the test would pass if provided the MatcherOptions to the getByText query I think this issue can be closed. This is documented here - https://testing-library.com/docs/queries/about#normalization
By default, normalization consists of trimming whitespace from the start and end of text, and collapsing multiple adjacent whitespace characters within the string into a single space.
and also mentioned in the test failure log for the test
Failed test code
test('can get text', () => {
const exampleText = `
hello
world
`
render(exampleText)
expect(screen.getByText(exampleText)).toBeInTheDocument()
})
Failed test output
TestingLibraryElementError: Unable to find an element with the text: hello world (normalized from '
hello
world
'). This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
hello
world
</div>
</body>
11 | render(exampleText)
12 |
> 13 | expect(screen.getByText(exampleText)).toBeInTheDocument()
| ^
14 | })
Example passing test
test('can get text', () => {
const exampleText = `
hello
world
`
render(exampleText)
expect(screen.getByText(exampleText, { trim: false, collapseWhitespace: false })).toBeInTheDocument()
})
