Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Waxoussou opened this issue Feb 24, 2025 · 0 comments
Labels
bug Something isn't working

Comments

@Waxoussou
Copy link

Waxoussou commented Feb 24, 2025

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"
@Waxoussou Waxoussou added the bug Something isn't working label Feb 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant