document.querySelectorAll('button#react-aria-:r22:.css-ofddhz') is not a valid selector

[kolorfilm]

I'm using JSDOM with Vitest and since the latest Update of JSDOM to v 26.0.0 that uses nwsapi 2.2.16 the react selector fails. I opened an issue within nwsapi but it seems it has not really something to do with it. This comment is really interesting as it points out that this id automatically created by the react-aria library seems to be invalid. I was wondering if something can explain it?

dperini/nwsapi#140 (comment)

Thanks guys!

[snowystinger]

It's valid, please use https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape_static

[kolorfilm]

Ok thanks for hint @snowystinger . The problem is I normally using getByTestId() in vitest (jsdom). It automatically takes the element under the hood.

I also opened an issue here.

[snowystinger]

I'm not sure I follow, is there still an issue?

[kolorfilm]

Yes there is. You can read the example in the linked issue. The example worked before I updated to jsdom 26.0.0. 😕

[snowystinger]

I read the example in the linked issue. Are you saying that await userEvent.click(screen.getByTestId('delete-button-0')); somehow translates to await userEvent.click(document.querySelector(button#react-aria-:r22:.css-ofddhz svg)); under the hood? because 'delete-button-0' is not problematic for a test id, nor is it related to the id attribute.

If so, I don't think this is a bug with us, this sounds like a userEvent bug or jsdom.

Have I misunderstood your comment and you suspect there's still a bug on our end?

[kolorfilm]

Yes exactly. This is what I meant. I try to open a ticket for userEvent. Thanks! 🙏