jest-dom
jest-dom copied to clipboard
query selector fails with jsdom 26.0.0 to find for `button#react-aria-:r22:.css-ofddhz svg`
@testing-library/jest-domversion: 6.6.3nodeversion: 22.13jest(orvitest) version: Vitest (3.0.1)npm(oryarn) version: pnpm 9.15.4
Relevant code or config:
HTML looks like that:
<button
aria-label="Delete"
class="css-18cu5b5"
data-rac=""
data-testid="delete-button-0"
id="react-aria-:r6:"
type="button"
>
<svg
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
...
</svg>
</button>
What you did:
await userEvent.click(screen.getByTestId('delete-button-0'));
What happened:
Since I updated jsdom to 26.0.0 I get SyntaxError: 'button#react-aria-:r22:.css-ofddhz svg' is not a valid selector.
The id seems to be valid and is generated by react-aria.
Reproduction:
Problem description:
According to react-aria this is a valid id.
https://github.com/adobe/react-spectrum/discussions/7624#discussioncomment-11874786
Suggested solution:
It looks like it has been broken in jsdom since 24.0.0.
Try to downgrade to the 23.2.0 version. This solution helped me solve the problem.
It looks like it has been broken in
jsdomsince24.0.0.Try to downgrade to the
23.2.0version. This solution helped me solve the problem.
First I thought it is a nwsapi bug because when I overwrite the version for jsdom dependencies it works (jsdom uses nwsapi). I just started to be broken for me with jsdom 26.0.0.
"pnpm": {
"overrides": {
"nwsapi": "2.2.13"
}
}
It's a bug in jsdom, see https://github.com/jsdom/jsdom/issues/3818#issuecomment-2677541896