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

• @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)

[CarlosGines]

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 📦🚀