Having a <p> inside a <label> breaks the query

[oncet]

• @testing-library/react version: 12
• Testing Framework and version:
  • jest version: 29.7.0
• DOM Environment:
  • jsdom version: 22.1.0

Relevant code or config:

<label>
  Foo
  <input />
  <p>Bar</p>
</label>

screen.getByLabelText('Foo')

What you did:

Trying to select a label with the text Foo.

What happened:

TestingLibraryElementError: Unable to find a label with the text of: Foo

Reproduction:

https://testing-playground.com/gist/e1e06f483627136ea87dc1435240f511/f11bc0299718a098e86958de617642a8fe6f1447

Problem description:

My <label> contains an <input> and a <p> for displaying errors and I can't selected using the recommended query for form inputs.

Suggested solution:

Allow selecting by label text even if it has a nested paragraph.

[oncet]

After some thought, I think the problem is not related to specifically to <p>, it could be any other element. The actual problem seems that all text nodes inside a <label> are considered part of the label text.

For example, using this selector works:

screen.getByLabelText('Foo Bar')

[oncet]

Just realized I could also use a regular expression instead of a string:

screen.getByLabelText(/Foo/)