Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

getByText not working for multiline text #1160

Open
sbland opened this issue Dec 7, 2022 · 2 comments
Open

getByText not working for multiline text #1160

sbland opened this issue Dec 7, 2022 · 2 comments

Comments

@sbland
Copy link

sbland commented Dec 7, 2022

  • @testing-library/react version: 13.3.0
  • Testing Framework and version:jest@27.5.1
  • DOM Environment:jsdom@16.7.0 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
@sbland
Copy link
Author

sbland commented Dec 7, 2022

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.

@agentdylan
Copy link

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()
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@agentdylan @sbland