@testing-library/jest-dom compatibility

[wight554]

Tried using toBeVisible API from https://github.com/testing-library/jest-dom, but it doesn't work, throws error:

Error: expect(element).not.toBeVisible()

Received element is visible:
  <div
  aria-hidden="true"
  class="MuiModal-root-jIXMqW exrcEY MuiModal-root MuiModal-hidden MuiPopover-root-kMnSrg MuiPopover-root MuiMenu-root-ehfJUa ewbHSc MuiMenu-root"
  id="menu-appbar"
  role="presentation"
/>

Noticed all fields from https://github.com/testing-library/jest-dom/blob/84fe8e05c0802f0c099f25021072254a49472671/src/to-be-visible.js#L6 are empty while debugging

[capricorn86]

Hi @wight554! :slightly_smiling_face:

Happy DOM only has a limited support for CSS at the moment. It can't read CSS applied using classes. Only styles set by using the "style" attribute.

I will look into adding support for CSS rendering.

[demccormack]

I managed to get happy-dom to recognise CSS classes by following these instructions: https://stackoverflow.com/a/74160802/20318864

Unfortunately I then got an error because happy-dom didn't recognise the ::before and ::after selectors.

DOMException: Invalid selector: "::before,
::after"
 ❯ Function.getSelectorGroups node_modules/happy-dom/src/query-selector/SelectorParser.ts:186:10
 ❯ Function.match node_modules/happy-dom/src/query-selector/QuerySelector.ts:119:38
 ❯ CSSStyleDeclarationElementStyle.parseCSSRules node_modules/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElementStyle.ts:296:42
 ❯ CSSStyleDeclarationElementStyle.getComputedElementStyle node_modules/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElementStyle.ts:124:12
 ❯ CSSStyleDeclarationElementStyle.getElementStyle node_modules/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElementStyle.ts:59:16
 ❯ CSSStyleDeclaration.getPropertyValue node_modules/happy-dom/src/css/declaration/AbstractCSSStyleDeclaration.ts:193:37
 ❯ isHidden node_modules/dom-accessibility-api/sources/accessible-name-and-description.ts:86:9
 ❯ computeTextAlternative node_modules/dom-accessibility-api/sources/accessible-name-and-description.ts:570:4
 ❯ computeTextAlternative node_modules/dom-accessibility-api/sources/accessible-name-and-description.ts:721:3
 ❯ computeAccessibleName node_modules/dom-accessibility-api/sources/accessible-name.ts:40:31

but for simpler CSS stylesheets I guess it would work fine.

[rinux55]

Using vitest, CSS seems to work just fine. Unfortunately I'm also running into issues with psuedo selectors:

DOMException: Invalid selector: "::-webkit-inner-spin-button,::-webkit-outer-spin-button"
 ❯ Function.getSelectorGroups ../../../node_modules/happy-dom/src/query-selector/SelectorParser.ts:186:10
 ❯ Function.match ../../../node_modules/happy-dom/src/query-selector/QuerySelector.ts:119:38
 ❯ CSSStyleDeclarationElementStyle.parseCSSRules ../../../node_modules/happy-dom/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts:277:42
 ❯ CSSStyleDeclarationElementStyle.getComputedElementStyle ../../../node_modules/happy-dom/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts:128:12
 ❯ CSSStyleDeclarationElementStyle.getElementStyle ../../../node_modules/happy-dom/src/css/declaration/element-style/CSSStyleDeclarationElementStyle.ts:63:16
 ❯ CSSStyleDeclaration.getPropertyValue ../../../node_modules/happy-dom/src/css/declaration/AbstractCSSStyleDeclaration.ts:193:37
 ❯ CSSStyleDeclaration.get display [as display] ../../../node_modules/happy-dom/src/css/declaration/CSSStyleDeclaration.ts:2657:15
 ❯ isStyleVisible ../../../node_modules/@testing-library/jest-dom/dist/to-be-visible.js:15:5
 ❯ isElementVisible ../../../node_modules/@testing-library/jest-dom/dist/to-be-visible.js:35:10
 ❯ Object.toBeVisible ../../../node_modules/@testing-library/jest-dom/dist/to-be-visible.js:43:37

[silvenon]

@rinux55 and what are you doing exactly? Where is this error coming from?

[rinux55]

I'm testing a nuxt 3 application with vitest, with nuxt-vitest as test environment. When including the @nuxtjs/tailwindcss Nuxt module, I get the above error when running expect().toBeVisible().

I've narrowed down the problem to the Nuxt tailwindcss module. When I wrote that comment I suspected it was a more broad problem with tailwind in general, but just including tailwind seems to works just fine.

I'm not sure if happy-dom support these pseudo selectors (::-webkit-inner-spin-button,::-webkit-outer-spin-button), or that the problem lies within @nuxtjs/tailwindcss.