Vue, how to test if child component (which is shown via v-show) is visible or not

Question

I'm trying to figure out how to test (using vue test utils & jest) whether a Child Component (which is shown via v-show) is currently visible or not (irrelevant of the Child Component's contents).

My vue html code looks like:

<ChildComponent v-show="isShowing"/>

I can't figure out how to test it. I came across this: https://github.com/vuejs/vue-test-utils/issues/327#issuecomment-355501127 however, wrapper.findComponent(...).hasStyle is not a function.

The closest that I can think of is testing the boolean:

expect(wrapper.vm.isShowing).toBe(true)

I know how to test if it was using v-if:

expect(wrapper.findComponent(ChildComponent).exists()).toBe(true) //it is conditionally rendered
expect(wrapper.findComponent(ChildComponent).exists()).toBe(false) //it is not conditionally rendered

Could anyone point me in the right direction? Thanks in advance!

Answer 1

There is a way to test, by using isVisible method.

isVisible() method check if the display:none or not and also it can test visibility:hidden and opacity :0

Here is an example with your code:

expect(wrapper.findComponent(ChildComponent).isVisible()).toBe(true)

And if that component is the main wrapper, then use like this:

expect(wrapper.isVisible()).toBe(true)