Switching from jsdom to happy-dom: TypeError: selector.match is not a function

[nocive]

Describe the bug
When switching from jsdom to happy-dom with vitest a TypeError: selector.match is not a function happens.

To Reproduce
Unfortunately I don't have a minimal reproduction scenario, I understand that this might make it tricky to understand what the problem is, but any pointers would be appreciated.

• Run vitest run
• Get a TypeError which does not occur when using jsdom

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/components/PluginWrapper/PluginWrapper.test.tsx > Testing <PluginWrapper /> component > it should show the Create Policy component and iframe
TypeError: selector.match is not a function
 ❯ Function.getSelectorGroups node_modules/happy-dom/src/query-selector/SelectorParser.ts:94:32
 ❯ Function.querySelectorAll node_modules/happy-dom/src/query-selector/QuerySelector.ts:93:33
 ❯ HTMLDocument.querySelectorAll node_modules/happy-dom/src/nodes/document/Document.ts:635:24
 ❯ Module.findSelector src/components/DangerouslySetHtmlContent/utils.ts:13:29
     11|     if (id) {
     12|       logIntegrationInfo('Searching for selector: ' + id)
     13|       const node = document.querySelectorAll(id)
       |                             ^
     14|       if (node?.length > 0) {
     15|         logIntegrationInfo('PluginSelector found: ' + id)
 ❯ Object.__ src/components/DangerouslySetHtmlContent/index.tsx:79:12
 ❯ invokeEffect node_modules/preact/hooks/src/index.js:493:22
 ❯ filter node_modules/preact/hooks/src/index.js:87:17
 ❯ node_modules/preact/hooks/src/index.js:86:60

Expected behavior
Working test suite just like when using jsdom :-)

Additional context
The application is a preact based application.

$ yarn info --name-only | grep -P 'vite|happy-dom|preact'
├─ @preact/preset-vite@npm:2.9.0
├─ @testing-library/preact@npm:3.2.3
├─ @vitest/ui@npm:2.0.5
├─ eslint-plugin-vitest@npm:0.5.4
├─ happy-dom@npm:14.12.3
├─ preact-habitat@npm:3.3.0
├─ preact@npm:10.18.1
├─ vite-plugin-circular-dependency@npm:0.4.1
├─ vite-plugin-node-polyfills@npm:0.22.0
├─ vite@npm:5.4.1
├─ vitest@npm:2.0.5

Vitest configuration is very straightforward:

test: {
  clearMocks: true,
  environment: 'happy-dom',
  setupFiles: ['./tests/setup.js'],
}

Test bootstrap code is as follows:

import * as matchers from '@testing-library/jest-dom/matchers'
import { cleanup } from '@testing-library/preact'
import { expect, afterEach } from 'vitest'
import '@testing-library/jest-dom/vitest'

expect.extend(matchers)

afterEach(() => {
  cleanup()
})

[nocive]

With new happy-dom 15.0.0 I get a different error message, which is maybe a better indication of what's actually going on:

SyntaxError: Failed to execute 'querySelectorAll' on 'HTMLDocument': '#content' is not a valid selector.
 ❯ Function.querySelectorAll node_modules/happy-dom/src/query-selector/QuerySelector.ts:93:10
 ❯ HTMLDocument.querySelectorAll node_modules/happy-dom/src/nodes/document/Document.ts:663:24

[btea]

Can you provide a link to reproduce it?

[nocive]

No, as stated in the issue report I don't have an isolated scenario to share unfortunately.

However, I found that the #content selector is a string at the time document.querySelectorAll is invoked and when the exception is thrown it somehow was turned into an object ([ '#content' ]).

Another strange thing is the fact that the exception is reported on node_modules/happy-dom/src/* but it actually seems to be using the node_modules/happy-dom/lib/* files.

[capricorn86]

Thank you for reporting @nocive! 🙂

I believe that the problem should be fixed now.

[nocive]

Fixed indeed, thank you so much! :-)