Element.matches fails when using non-matching descendant selector on element attached to document

[IGx89]

const element = document.createElement('div');
document.appendChild(element);
expect(element.matches('.nonexistent-class div')).toBe(false);

TypeError: Cannot read properties of undefined (reading 'split')

  296 |     ): { priorityWeight: number; matches: boolean } {
  297 |             const regexp = new RegExp(CLASS_REGEXP, 'g');
> 298 |             const classList = element.className.split(' ');
	  |                                                 ^
  299 |             const classSelector = selector.split(':')[0];
  300 |             let priorityWeight = 0;
  301 |             let match: RegExpMatchArray;

  at SelectorItem.matchesClass (src/query-selector/SelectorItem.ts:298:39)
  at SelectorItem.match (src/query-selector/SelectorItem.ts:91:24)
  at Function.matchesSelector (src/query-selector/QuerySelector.ts:107:27)
  at Function.matchesSelector (src/query-selector/QuerySelector.ts:113:15)
  at Function.matchesSelector (src/query-selector/QuerySelector.ts:113:15)
  at Function.matchesSelector (src/query-selector/QuerySelector.ts:113:15)
  at Function.match (src/query-selector/QuerySelector.ts:66:24)
  at HTMLElement.matches (src/nodes/element/Element.ts:734:24)

[capricorn86]

Thanks @IGx89 for your contribution! 🙂

Your fix has been released.

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

[cristianstu]

I was having this issue, I'm still getting a similar error with version 7.5.3 but now it is:

TypeError: Cannot read properties of null (reading 'className')

[capricorn86]

It seems like the problem isn't completely fixed. Re-opening.

[IGx89]

@cristianstu Can you share your selectors and HTML with us? And more of your stack trace?

[cristianstu]

Sure, I'm actually using testing library, not happy dom directly, this is the stack trace:

 ❯ test/pages/login.test.tsx:86:26
     84|     renderLogin();
     85| 
     86|     const button = screen.getByRole('button');
       |                          ^
     87|     const username = screen.getByLabelText<HTMLInputElement>('Username…
     88|     const password = screen.getByLabelText<HTMLInputElement>('Password…



⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[14/16]⎯

 FAIL  test/app.test.tsx > App > navigate when click on an item menu
TypeError: Cannot read properties of null (reading 'className')
 ❯ SelectorItem.matchesClass node_modules/happy-dom/lib/query-selector/SelectorItem.js:249:35
 ❯ SelectorItem.match node_modules/happy-dom/lib/query-selector/SelectorItem.js:72:33
 ❯ Function.matchesSelector node_modules/happy-dom/lib/query-selector/QuerySelector.js:87:33
 ❯ Function.matchesSelector node_modules/happy-dom/lib/query-selector/QuerySelector.js:91:21
 ❯ Function.match node_modules/happy-dom/lib/query-selector/QuerySelector.js:59:33
 ❯ CSSStyleDeclarationElementStyle.parseCSSRules node_modules/happy-dom/lib/css/declaration/utilities/CSSStyleDeclarationElementStyle.js:230:73

[IGx89]

Thanks! That's actually not Element.matches so this is a separate issue. Looks like something in your CSS style sheet is triggering the exception.

[IGx89]

@cristianstu I looked over the code and found a (different) way to reproduce that specific error. I've submitted #625 to fix it -- hopefully it'll fix your issue!

[cristianstu]

@cristianstu I looked over the code and found a (different) way to reproduce that specific error. I've submitted #625 to fix it -- hopefully it'll fix your issue!

Perfect, Thank you!

[IGx89]

@cristianstu give v7.5.14 a try and let us know!

[capricorn86]

Thanks for your contribution @IGx89! 🙂

Your fix is in now.

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

[cristianstu]

@cristianstu give v7.5.14 a try and let us know!

It's fixed! Everything looks nice, thanks!