Extra space added around embedded expressions in JSX when querying by role + name

[wild-lotus]

• @testing-library/dom version: 7.5.9
• Testing Framework and version: jest 25.5.4
• DOM Environment: jsdom

Relevant code or config:

export default ({ name }) => <h1>Hello {name}!</h1>;

screen.getByRole("heading", { name: /Hello Jill!/i })

What you did:

Tried to query an element by role + name

What happened:

The existing element cannot be found.
If the name is in JSX with an embedded expression, potentially inexistent spaces are added around it:

Unable to find an accessible element with the role "heading" and name `/Hello Jill!/i`

Here are the accessible roles:

  heading:

  Name "Hello Jill !":
  <h1 />

Note the extra space here:

 Name "Hello Jill !":
                 ^

Reproduction:

https://codesandbox.io/s/react-testing-library-demo-09wqi

Problem description:

I cannot create accurate queries in those cases (embedded expressions without surrounding space)

[pranjaljately]

For some reason, I am having issues running tests in your codesandbox but I think you will find that the cause of the issue is in your hello.js component.
export default ({ name }) => <h1>Hello {name} !</h1>; <-- Notice the extra space you have between {name} and !. Removing that space should fix your issue 👍

[wild-lotus]

Hello @pranjaljately! Thank you for your comment! I updated the reproduction case, the space in the hello.js component was unintentional! New one --> https://codesandbox.io/s/react-testing-library-demo-09wqi
Still, there seems to be a problem with Codesandbox at present, even the original template (https://codesandbox.io/s/5z6x4r7n0p) is not working now. I hope that it will get fixed soon, so that we can easily reproduce the issue!

[pranjaljately]

Thanks, @CarlosGines. I have seen the updated CS and AFAIK the test should not be failing.

Any reason why this could be? @kentcdodds
Happy to try and implement a fix if needed...

[kentcdodds]

Hi friends,

Thanks for the issue. I'm guessing that's a bug in the calculation of the accessible name. What do you think @eps1lon?

[eps1lon]

The expected behavior makes more sense, yes.

This is caused by react adding 3 text nodes instead of one and accname being too vague about whitespace in certain steps.

I'll see how we can reconcile these issues.

[eps1lon]

Didn't know I github auto-closes issues across repos. #606 will actually close.

Otherwise bump dom-accessibility-api in your lockfile.

[wild-lotus]

Awesome! Such a quick reply and fix! Thank you folks!
I did check the CodeSandbox of the PR and it does work as expected ^__^

[kentcdodds]

🎉 This issue has been resolved in version 7.10.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀