Add support for <br /> (line breaks) when matching text

Describe the feature you’d like:

Given the following markup:

<div>Hello<br />World</div>

considering that innerText of the above element would be "Hello\nWorld" (see this JSFiddle), I expect that I would be able to use this query:

screen.getByText("Hello\nWorld");

but it throws the following error:

TestingLibraryElementError: Unable to find an element with the text: 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.

This example on CodeSandbox

Suggested implementation:

Describe alternatives you’ve considered:

I’ve considered using a custom function, like the error message suggests, but this is my first experience with Testing Library, and I don’t really know how to do it yet.

And since it’s a simple case, I would rather like to use a simple query, without providing any custom functions.

Teachability, Documentation, Adoption, Migration Strategy:

[kentcdodds]

That makes sense. One thing you could do is this:

expect(screen.getByText(/look for an email/i)).toMatchInlineSnapshot()

That would output everything with the <br />. I’m just not sure how I feel about encoding things like this in the query because you could implement that same thing using spans/divs/etc.

[christo8989]

@EvgenyOrekhov

Might not be the best solution but it’s working for me.

screen.getByText(/Look for an email from.*if you don't see it, check your spam folder./);