Bug: isVisible weird behavior for 2.3.2 version

[andinh-minacolor]

Describe the bug
I have been using version 2.2.6 for a while and it works great then I tried to update this module to 2.3.2 and got the issue with isVisible function behavior. As provided below, after accessing isVisible for first time it's value will not be changed later even the virtual DOM has been updated correctly.

To Reproduce
This is the component

<template>
  <div v-show="show">
    <span />
    <button @click="onClick"></button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const show = ref(true)

const onClick = () => {
  show.value = !show.value
}

</script>

This is the test

import { mount } from '@vue/test-utils';
import check from './check.vue'

test('isVisible', async () => {
  const wrapper = mount(check)
  expect(wrapper.find('span').isVisible()).toBe(true)
  await wrapper.find('button').trigger('click')
  console.log("***> wrapper", wrapper.html())
  // this value will always be true, but if I remove the isVisible code above it will be false.
  expect(wrapper.find('span').isVisible()).toBe(false)
})

[cexbrayat]

Hi @andinh-minacolor

I think this is because of a change in jsdom v21: some properties are now updated only if the element is attached to the DOM.

Try adding mount(check, { attachTo: document.body }), and let us know if that fixes the issue.

[andinh-minacolor]

hi @cexbrayat
Many thanks for your reply. Yeah it is JSDOM issue. Your code provide a fix.

[ikex]

Hey.

According to the jsdom issue it seems that jsdom behavior is going to stay and works "as expected". For the time being we are using a fix - attachTo: document.body... but I wonder... is there any long-term plan to have it... fixed/implemented on the test-utils side? Or explicit attachTo is the solution we should have?

Is there a specific issue that tracks this and the one I should follow?

Thanks :)

References:
jsdom/jsdom#3502

[cexbrayat]

We can't fix it on VTU side, so yeah, the solution is to use attachTo 👍

[alecgibson]

I feel like this should be documented somewhere, or ideally even throw if you're trying to use isVisible() on a wrapper that isn't attached to the DOM.

[cexbrayat]

@alecgibson Great idea: would you mind opening a PR to add a note to the isVisible docs? That would be a great help

[alecgibson]

@cexbrayat I've raised a docs PR here: #2122

Would there be any appetite for throwing when trying to use this on an element not connected to the DOM? I always like my frameworks to shout at me if I'm using them incorrectly, but I acknowledge that trying to throw in this case is not necessarily as simple as it may seem.

[cexbrayat]

Thanks for the PR 👍

I'm not sure about throwing, because it works properly in many cases, and the behavior is only different with recent jsdom versions. We talked about attaching to the DOM by default, but we did not go further for now.

[alecgibson]

it works properly in many cases

As a consumer it's hard to know what these cases are, though (and I prefer to know it will always work). Attaching by default sounds relatively sensible (if potentially breaking...?), but if that's the stance that's fine; we'll work around it by patching or something.

[VividLemon]

I kind of get the same behavior https://github.com/bootstrap-vue-next/bootstrap-vue-next/pull/1947/files#diff-06f4bc6a6331e64f2623754171c439baa0caa99533e6f3bad5b3e3fba8281f92 but even with attachTo, I need to manually refetch the wrapper.find('div.modal') in order to have the isVisible update.

It's not just an issue with isVisible though, it also doesn't update style attribute. I found that if I did wrapper.html() that the style tag included display: none; but modal.attributes('style').toContain('display: none;') would not be updated. Very odd