Invalid selector with `input:not([value=''])` in 2.2.16

[primeapple]

I have some troubles with failing selector creation in v2.2.16 . Resetting to v2.2.13 fixes the issue. v2.2.14 gives another unrelated error, which does not let me test it. v2.2.15 also gives this error, so it was probably broken in v2.2.14 or v2.2.15.

This is the line where it errors from (using React Testing Library):

    const thing = screen.getByRole("textbox")

it produces this error

SyntaxError: 'input#:r0:.MuiInputBase-input input:not([value=''])' is not a valid selector
 ❯ emit ../../node_modules/nwsapi/src/nwsapi.js:651:17
 ❯ _querySelectorAll ../../node_modules/nwsapi/src/nwsapi.js:1646:9
 ❯ Object._querySelector [as first] ../../node_modules/nwsapi/src/nwsapi.js:1555:14
 ❯ HTMLInputElementImpl.querySelector ../../node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:69:44
 ❯ HTMLInputElement.querySelector ../../node_modules/jsdom/lib/jsdom/living/generated/Element.js:1094:58
 ❯ Array.Resolver ../../node_modules/nwsapi/src/nwsapi.js:853:17
 ❯ match_assert ../../node_modules/nwsapi/src/nwsapi.js:1482:13
 ❯ Object._matches [as match] ../../node_modules/nwsapi/src/nwsapi.js:1546:14
 ❯ exports.matchesDontThrow ../../node_modules/jsdom/lib/jsdom/living/helpers/selectors.js:29:36
 ❯ matches ../../node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:172:10

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { code: 12, INDEX_SIZE_ERR: 1, DOMSTRING_SIZE_ERR: 2, HIERARCHY_REQUEST_ERR: 3, WRONG_DOCUMENT_ERR: 4, INVALID_CHARACTER_ERR: 5, NO_DATA_ALLOWED_ERR: 6, NO_MODIFICATION_ALLOWED_ERR: 7, NOT_FOUND_ERR: 8, NOT_SUPPORTED
_ERR: 9, INUSE_ATTRIBUTE_ERR: 10, INVALID_STATE_ERR: 11, SYNTAX_ERR: 12, INVALID_MODIFICATION_ERR: 13, NAMESPACE_ERR: 14, INVALID_ACCESS_ERR: 15, VALIDATION_ERR: 16, TYPE_MISMATCH_ERR: 17, SECURITY_ERR: 18, NETWORK_ERR: 19, ABORT_ERR:
 20, URL_MISMATCH_ERR: 21, QUOTA_EXCEEDED_ERR: 22, TIMEOUT_ERR: 23, INVALID_NODE_TYPE_ERR: 24, DATA_CLONE_ERR: 25 }

All failing test have in common that the selector to be created ends with input:not([value='']).

I can debug it further if you have an idea where to plant these console.logs, maybe?

See also https://github.com/dperini/nwsapi/issues/135#issuecomment-2508793222 and https://github.com/dperini/nwsapi/issues/135#issuecomment-2509542977 -> this ticket might be closed.

[dperini]

@primeapple cannot confirm yet ... I did some test and cannot reproduce it without React Testing Library. Can you create a minimal reproducible test with just nwsapi (no React) ? If I have that maybe I will find the bug faster. Thank you for the report.

[iiroj]

I also hit this with the following selector:

    SyntaxError: 'div#:rp:.sc-jsFtja input[aria-disabled='true']' is not a valid selector

I'll try to build a reproducible test.

[dperini]

@iiroj

SyntaxError: 'div#:rp:.sc-jsFtja input[aria-disabled='true']' is not a valid selector

this string is giving an error also using native QS Api so the report is invalid. 'div#:rp:.sc-jsFtja input[aria-disabled='true']' The problem is due to both colon (:) characters. Remove both colons and it doesn't give errors any more.

[iiroj]

@dperini ok thanks, I think in the original issue there's also :. So have these worked in an older version? I think they're coming from the React useId() hook, but adding a wrapper to convert them into a valid format shouldn't be a problem.

[SerkanSipahi]

I can confirm. It is related to this : character in the selector. In our case, all the tailwind classes, like :gap-4 [cols], ...,..., are failing. The error occurs in @testing-library/user-event in our Angular tests.

@dperini we cannot remove the colon (:) because as you see the classes are tailwind classes which is used in testing library as selectors. Do you have any suggestions what to do?

[SerkanSipahi]

@primeapple thank you for your investigation. By overriding the upstream library nwsapi in the package.json, I was able to fix the error as a intermediate solution.

"overrides": {
  "nwsapi": "2.2.13"
}

[alistairwilliamtaylor]

Hey there, thanks for all of your hard work on this library! 🤩

Sadly, we are having the same issue with a breaking change between v2.2.13 and v2.2.16. In our case though, we are leveraging the :user-invalid pseudo selector in our code. Here is our error:

SyntaxError: unknown pseudo-class selector ':user-invalid'

      at emit (../../node_modules/nwsapi/src/nwsapi.js:651:17)
      at compileSelector (../../node_modules/nwsapi/src/nwsapi.js:1418:17)
      at compile (../../node_modules/nwsapi/src/nwsapi.js:838:16)
      at collect (../../node_modules/nwsapi/src/nwsapi.js:1693:22)
      at _querySelectorAll (../../node_modules/nwsapi/src/nwsapi.js:1651:36)
      at Object._querySelector [as first] (../../node_modules/nwsapi/src/nwsapi.js:1555:14)
      at HTMLDivElementImpl.querySelector (../../node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:69:44)
      at HTMLDivElement.querySelector (../../node_modules/jsdom/lib/jsdom/living/generated/Element.js:1094:58)
      at Array.Resolver (eval at compile (../../node_modules/nwsapi/src/nwsapi.js:853:17), <anonymous>:3:67)
      at match_assert (../../node_modules/nwsapi/src/nwsapi.js:1482:13)
      at Object._matches [as match] (../../node_modules/nwsapi/src/nwsapi.js:1500:16)
      at Array.Resolver (eval at compile (../../node_modules/nwsapi/src/nwsapi.js:853:17), <anonymous>:3:203)
      at match_assert (../../node_modules/nwsapi/src/nwsapi.js:1482:13)
      at Object._matches [as match] (../../node_modules/nwsapi/src/nwsapi.js:1500:16)
      at exports.matchesDontThrow (../../node_modules/jsdom/lib/jsdom/living/helpers/selectors.js:29:36)
      at matches (../../node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:50:10)
      at ../../node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:35:18
          at Array.forEach (<anonymous>)
      at handleSheet (../../node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:26:13)
          at Array.forEach (<anonymous>)
      at exports.forEachMatchingSheetRuleOfElement (../../node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:46:11)
      at Window.getComputedStyle (../../node_modules/jsdom/lib/jsdom/browser/Window.js:806:5)

Previously, in v2.2.13, we were aware that functionality around :user-invalid was not supported by nwsapi, so we could not write tests about styles relating to this pseudo-class. But our unit tests containing elements which happened to have :user-invalid styling applied were still passing, and weren't throwing errors from nwsapi as they do now.

[alistairwilliamtaylor]

After having a look around, it seems like possibly the way that jsdom passes VERBOSITY: false when configuring their matchesDontThrow function is no longer successfully suppressing errors like it is expected to. Has something possibly changed which has broken the configure function?

[dperini]

@alistairwilliamtaylor @iiroj @peruukkii Happy to hear you have made up working alternatives in your environment,

I can't have direct support for unspecified (non w3c) features in the main code, hope you understand the reasons for that. However I can suggest at least two more alternatives already present in nwsapi that in my view could be of help in these cases. One of the suggestions is to use the available triplet of methods registerCombinators() / registerOperator() / registerSelector() . that will let developer customize nwsapi to their needs. I have not written the complete documentation yet but I will.

More about this later ... if you are ok with sharing PM, this help can be accelerated. Please contact me and send me your addresses.

[dperini]

@alistairwilliamtaylor @iiroj unfortunately during the last testing a new regression was found forcing me to postpone the release.

So please be patient and bear with my slowness. It will happen in the next weekend anyway. Thank you for your understanding.

[dperini]

Closing as completed. Reopen if necessary.