Bug: isVisible doesn't work vs happy-dom

[pearofducks]

Describe the bug
isVisible doesn't detect hidden elements if happy-dom is used as the test environment.

To Reproduce
https://github.com/pearofducks/vue-test-utils-reproduction

pnpm i && pnpm test

To counter-reproduce the test.environment field can be changed to jsdom in vitest.config.js.

Expected behavior
The test should pass, because the root element is hidden with display: none.

Related information:

  System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
    Memory: 784.45 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - ~/.pnpm-binaries/yarn
    npm: 8.5.5 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 102.0.5005.115
    Firefox: 100.0.2
    Safari: 15.5
  npmPackages:
    @vitejs/plugin-vue: ^2.3.3 => 2.3.3
    @vue/compiler-sfc: ^3.2.37 => 3.2.37
    @vue/test-utils: ^2.0.1 => 2.0.1
    happy-dom: ^5.3.1 => 5.3.1
    jsdom: ^19.0.0 => 19.0.0
    vite: ^2.9.12 => 2.9.12
    vitest: ^0.15.0 => 0.15.0
    vue: ^3.2.37 => 3.2.37

Additional context

[cexbrayat]

@pearofducks Thanks for the repro. Yes, happy-dom has several issues, I would not be surprised if display: none; is one of them (as you can see here, we ware not doing anything extraordinary).

The current test suite of VTU uses jsdom and is failing when switching to happy-dom, mainly because of issues with happy-dom itself.
We have an issue tracking the possibility of running the test suite with both jsdom and happy-dom , so I'm closing this one in favor of #513

If you are interested in helping us to support happy-dom, you can try to run VTU test suite with happy-dom and investigate if the failures are caused:

• by VTU, and in that case, we can try to fix it
• or by happy-dom itself, in which case we can't do a lot, except by opening an issue on happy-dom repo

[pearofducks]

I'll look into that! If someone else finds this in the future a mitigation is to use attachTo to ensure the DOM element is actually placed on the document.

const wrapper = mount(MyComponent, { attachTo: document.body })

This is due to happy-dom's behavior with getComputedStyle.

[cexbrayat]

Awesome, thanks for letting us know the workaround 👍