Bug: css visibility (or display, etc...) does not seem to be considered when mounting a compoenent

[Waxoussou]

Describe the bug
Using vue3, vue-test-utils and vitest, checking for component visibility with isVisible does not work as it is always true.

To Reproduce
Component under test :

 <template>
            <span class="one" >LABEL NOT DISPLAYED</span>
            <span class="two" >LABEL ALWAYS DISPLAYED</span>
   </template>

<style lang="scss">
.one{
   visibility: hidden; 
}
</style>

Test File:

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

expect(wrapper.text()).toEqual("LABEL ALWAYS DISPLAYED") // Return false as both span are rendered : "LABEL NOT DISPLAYEDLABEL ALWAYS DISPLAYED"

using wrapper.find(".one").isVisible() return true as well

Expected behavior
wrapper.find(".one") should not be found and Wrapper.text() should return only : LABEL ALWAYS DISPLAYED

Related information:

• "@vue/test-utils": "^2.4.6",
• "vitest": "^2.1.3",
• tested with "happy-dom" and "jsdom"

[cexbrayat]

Hi @Waxoussou

You may be running into #1704 (comment)
Give that a try and let us know if it solves your issue.

If not, can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?
It only takes a few minutes, and we'll be able to take a look

[Waxoussou]

Hi @cexbrayat

Thanks for your comment.

So, I have been applying somes changes from that link issue you gave me.
It seems that it is working with jsdom and by adding css:true in my config.

Still an issue with happy-dom though.
Fortunately, vitest allow with per file vitest environnement, so I believe that could work for me.

Anyway, if needed, here"s my small repro if it s something that willing to be investigated further about happy-dom: https://stackblitz.com/edit/github-q8j37hu3?file=vitest.config.ts,src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts,vite.config.ts

But i feel like this is not an issue for me anymore with that workaround.

thanks for your time and consideration

[cexbrayat]

Awesome. Yes, we often have issues raised that are in fact happy-dom issues. Let's close then.