getByRole fails if filtering by accessible name with   in it

[jegtnes]

• @testing-library/dom version: 7.28.1 (via react-testing-library 11.2.5)
• Testing Framework and version: Jest 26.6.3
• DOM Environment: JSDom 16.2.1

Relevant code or config:

DOM:

<label for="testy">Fascinating&nbsp;input</label>
<input id="testy" name="ice-cream-flavour" />

Test code:

expect(
  screen.getByRole("textbox", { name: "Fascinating input" })
).toBeInTheDocument();

What you did:

Attempted to find an element by role with a non-breaking space in the accessible name, by searching for the accessible name without having to encode a non-breaking space in JavaScript where the space goes (\xa0).

What happened:

Fails on getByRole

If searching for the accessible name with a regular space in getByRole, the test will fail.

getByRole("textbox", { name: "Fascinating input" })

Succeds on getByLabelText

If searching for the name with a regular space in getByLabelText, the test will succeed.

getByLabelText("Fascinating input"))

Succeeds on getByRole with \xa0 instead of a regular space

If searching for the accessible name with a JS representation of &nbsp, \xa0 in getByRole, the test will succeed.

getByRole("textbox", { name: "Fascinating\xa0input" })

Fails on getByLabelText with \xa0 instead of a regular space

If searching for the name with a JS representation of &nbsp, \xa0, in getByLabelText the test will fail.

getByLabelText("Fascinating\xa0input")

Reproduction:

Codesandbox reproduction

Problem description:

This seems incongrugous with testing-library's philosophy of "testing what the user sees", and is additionally inconsistent with other methods. If there's a reason we must specifically encode a breaking space to test for an element with a breaking space in the accessible name, it might be a good idea to be clearer about this in the error messaging. I was converting an existing code base from Enzyme to react-testing-library, and seeing an error like this understandably confused me a bit:

Suggested solution:

• Make the text matching/parsing consistent between different methods
• If the above isn't feasible, make this error clearer in the error output by highlighting the breaking space, or lack thereof

As an aside

Since the issue template makes me seem extremely clinical, I just wanted to highlight I'm not an ungrateful jerk (I hope) and would like to thank all the contributors for a wonderful piece of work! The philosophy behind testing-library makes a lot of sense and I'm really enjoying working with it. ✨

[katesroad]

I'm using version "@testing-library/react": "^11.2.5",. My code works using in this way.

 <label
                class="sc-gsTCUz kHIuWv"
                for="senderAddress.postcode"
              >
                post code
              </label>
              <input
                class="sc-dlfnbm sc-hKgILt fxqgV code"
                id="senderAddress.postcode"
                name="senderAddress.postcode"
                value="sender postcode"
                variant=""
              />
              <small
                class="sc-eCssSg dEHZqf"
              />
            </div>

and here is my testing code

	expect(screen.getByRole("textbox", { name: /post code/i })).toHaveValue(
		senderAddress.postcode
	);

[savcni01]

I plan to work on this issue today.

It looks like the issue is related (if not similar) to #890

[eps1lon]

Closing since it's unclear if we really want this. The normalizer would also collapse newlines and it should be obvious in tests if you really want newlines in the name.

Note that you can always do getByRole('textbox', { name: 'Fascinating input' }) or getByRole('textbox', { name: name => name.replace(/\s+/g, ' ') === Fascinating input }) if you are sure that the whitespace should be collapsed. And you can always create a custom wrapper that implements this behavior by default.

ByRole is not intended to work just like ByLabelText. Otherwise we wouldn't need two queries. ByRole is a strict, spec compliant query. Following the spec avoids having extensive discussions that we're not equipped to have.

If you have a strong argument for collapsing whitespace then please file an issue against https://github.com/w3c/accname though w3c/accname#95 might already be similar.

There may be an argument for replacing   specifically with just ' ' since I believe word-breaking is just a visual thing. But again, let's have this discussion in the spec.

[cookiecrook]

For future reference, the ARIA spec and soon the WPT tests align on ASCII white space which does not include non-breaking white space. So it was correct to close this. NBSP should never be converted or collapsed to “ “ in the label context.