[BUG] DOMException: The selector ":not" is not valid. when using .not.toMatch

[SalahAdDin]

Describe the bug
After updating the happy-dom version to the latest one, we are getting the following error:

bash
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 4 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/app/_components/visuals/StreamingStatusIndicator/StreamingStatusIndicator.test.tsx > streamingStatusIndicator > should render a single animated online indicator when rendering
 FAIL  src/app/_components/visuals/StreamingStatusIndicator/StreamingStatusIndicator.test.tsx > streamingStatusIndicator > should render a double animated offline indicator when rendering
 FAIL  src/app/_components/visuals/StreamingStatusIndicator/StreamingStatusIndicator.test.tsx > streamingStatusIndicator > should render a single paused indicator when rendering
 FAIL  src/app/_components/visuals/StreamingStatusIndicator/StreamingStatusIndicator.test.tsx > streamingStatusIndicator > should render a double indicator when rendering
DOMException: The selector ":not" is not valid.
 ❯ SelectorItem.matchPsuedo node_modules/.pnpm/happy-dom@14.3.2/node_modules/happy-dom/src/query-selector/SelectorItem.ts:138:13
 ❯ SelectorItem.match node_modules/.pnpm/happy-dom@14.3.2/node_modules/happy-dom/src/query-selector/SelectorItem.ts:101:24
 ❯ SelectorItem.matchPseudoItem node_modules/.pnpm/happy-dom@14.3.2/node_modules/happy-dom/src/query-selector/SelectorItem.ts:283:23
 ❯ SelectorItem.matchPsuedo node_modules/.pnpm/happy-dom@14.3.2/node_modules/happy-dom/src/query-selector/SelectorItem.ts:160:31
 ❯ SelectorItem.match node_modules/.pnpm/happy-dom@14.3.2/node_modules/happy-dom/src/query-selector/SelectorItem.ts:101:24
 ❯ Function.matchSelector node_modules/.pnpm/happy-dom@14.3.2/node_modules/happy-dom/src/query-selector/QuerySelector.ts:247:31
 ❯ Function.match node_modules/.pnpm/happy-dom@14.3.2/node_modules/happy-dom/src/query-selector/QuerySelector.ts:221:24
 ❯ CSSStyleDeclarationElementStyle.parseCSSRules node_modules/.pnpm/happy-dom@14.3.2/node_modules/happy-dom/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts:331:42
 ❯ CSSStyleDeclarationElementStyle.getComputedElementStyle node_modules/.pnpm/happy-dom@14.3.2/node_modules/happy-dom/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts:133:12
 ❯ CSSStyleDeclarationElementStyle.getElementStyle node_modules/.pnpm/happy-dom@14.3.2/node_modules/happy-dom/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts:65:16

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/4]⎯

 Test Files  1 failed | 28 passed (29)
      Tests  4 failed (4)
   Start at  11:59:13
   Duration  14.45s (transform 2.02s, setup 82.59s, collect 3.13s, tests 484ms, environment 48.44s, prepare 24.60s)

 ELIFECYCLE  Test failed. See above for more details.
husky - pre-push script failed (code 1)
error: failed to push some refs to 'github.com:trt-digital/global-webFE.git'

It happens for the following code:

it("should render a single animated online indicator when rendering", () => {
    expect.assertions(5);
    const view = render(<StreamingStatusIndicator animate />);
    expect(view).toBeTruthy();

    const indicator = screen.getByRole("status");
    expect(indicator).toBeInTheDocument();
    expect(indicator.getAttribute("class")).not.toMatch("double");
    expect(indicator.getAttribute("class")).toMatch("online");
    expect(indicator.getAttribute("class")).toMatch("animate");
  });

Only this file has that matcher:

And the component does not include any :not pseudo-element:

.streamingStatusIndicator {
  &.double {
    &.animate {
      path:first-child {
        animation: var(--animation-blink);
      }
    }
  }

  &.single {
    &.animate {
      circle {
        animation: var(--animation-blink);
      }
    }
  }

  &.offline {
    color: var(--red-7);
  }

  &.online {
    color: var(--green-7);
  }

  &.pause {
    color: var(--yellow-7);
  }
}

We updated from 13 to 14 version:

To Reproduce
Steps to reproduce the behavior:

1. Go to any test.
2. use a not.toMatch query on any element.
3. Update the happy-dom version.
4. Run the tests.

Expected behavior
It should not give any issue.

Screenshots
If applicable, add screenshots to help explain your problem.

Device:

• OS: Manjaro Linux x86_64
• Browser: Firefox
• Version: 14.3.2.

Additional context
We checked it with all versions from 14 to 14.3.2 and it seems it is broken from the 14.2.0 where some pseudo selectors where introduced.

There is also a typo error in SelectorItem.matchPsuedo.

[capricorn86]

Thank you for reporting @SalahAdDin! 🙂

The error throws seem to be that Window.getComputedStyle() parses the CSS on the page, and somewhere there is an invalid :not selector that it fails to parse. Window.getComputedStyle() should not throw errors for invalid selectors, so I have added support for ignoring errors when parsing the CSS, which should solve the problem for you.

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v14.3.4

[SalahAdDin]

Thank you for reporting @SalahAdDin! 🙂

The error throws seem to be that Window.getComputedStyle() parses the CSS on the page, and somewhere there is an invalid :not selector that it fails to parse. Window.getComputedStyle() should not throw errors for invalid selectors, so I have added support for ignoring errors when parsing the CSS, which should solve the problem for you.

You can read more about the release here: https://github.com/capricorn86/happy-dom/releases/tag/v14.3.4

It sounds good, but:

 ✓ src/app/[locale]/[category]/[article]/_components/ContinueReadingArticleCard/ContinueReadingArticleCard.test.tsx (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 4 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/app/_components/visuals/StreamingStatusIndicator/StreamingStatusIndicator.test.tsx > streamingStatusIndicator > should render a single animated online indicator when rendering
 FAIL  src/app/_components/visuals/StreamingStatusIndicator/StreamingStatusIndicator.test.tsx > streamingStatusIndicator > should render a double animated offline indicator when rendering
 FAIL  src/app/_components/visuals/StreamingStatusIndicator/StreamingStatusIndicator.test.tsx > streamingStatusIndicator > should render a single paused indicator when rendering
 FAIL  src/app/_components/visuals/StreamingStatusIndicator/StreamingStatusIndicator.test.tsx > streamingStatusIndicator > should render a double indicator when rendering
TypeError: pseudo.selectorItems is not iterable
 ❯ SelectorItem.matchPseudoItem node_modules/.pnpm/happy-dom@14.3.6/node_modules/happy-dom/src/query-selector/SelectorItem.ts:285:39
 ❯ SelectorItem.matchPseudo node_modules/.pnpm/happy-dom@14.3.6/node_modules/happy-dom/src/query-selector/SelectorItem.ts:171:31
 ❯ SelectorItem.match node_modules/.pnpm/happy-dom@14.3.6/node_modules/happy-dom/src/query-selector/SelectorItem.ts:105:24
 ❯ SelectorItem.matchPseudoItem node_modules/.pnpm/happy-dom@14.3.6/node_modules/happy-dom/src/query-selector/SelectorItem.ts:294:23
 ❯ SelectorItem.matchPseudo node_modules/.pnpm/happy-dom@14.3.6/node_modules/happy-dom/src/query-selector/SelectorItem.ts:171:31
 ❯ SelectorItem.match node_modules/.pnpm/happy-dom@14.3.6/node_modules/happy-dom/src/query-selector/SelectorItem.ts:105:24
 ❯ Function.matchSelector node_modules/.pnpm/happy-dom@14.3.6/node_modules/happy-dom/src/query-selector/QuerySelector.ts:258:31
 ❯ Function.matches node_modules/.pnpm/happy-dom@14.3.6/node_modules/happy-dom/src/query-selector/QuerySelector.ts:232:24
 ❯ CSSStyleDeclarationElementStyle.parseCSSRules node_modules/.pnpm/happy-dom@14.3.6/node_modules/happy-dom/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts:331:36
 ❯ CSSStyleDeclarationElementStyle.getComputedElementStyle node_modules/.pnpm/happy-dom@14.3.6/node_modules/happy-dom/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts:133:12

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/4]⎯

 Test Files  1 failed | 28 passed (29)
      Tests  4 failed (4)
   Start at  10:29:18
   Duration  13.37s (transform 1.92s, setup 77.56s, collect 2.92s, tests 667ms, environment 45.63s, prepare 23.47s)

 ELIFECYCLE  Test failed. See above for more details.
husky - pre-push script failed (code 1)
error: failed to push some refs to 'github.com:trt-digital/global-webFE.git'

@capricorn86 Should I open a new issue?

[capricorn86]

@SalahAdDin this problem should also be fixed now 🙂

https://github.com/capricorn86/happy-dom/releases/tag/v14.3.8

[SalahAdDin]

@SalahAdDin this problem should also be fixed now 🙂

https://github.com/capricorn86/happy-dom/releases/tag/v14.3.8

And yeah, finally it is fixed.

Tesekkur ederim