CODEWITHSUNDEEP
vue.jsjestjsvue-componentvue-test-utils
Clarity
Clarity

Reputation: 3

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

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!

Upvotes: 0

Views: 9307

Answers (2)

ardmont
ardmont

Reputation: 125

The same happened with me, and is solved it by creating a jest setup file, as an index.js file inside test/unit with the following code:

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

Vue.config.productionTip = false

And after that I added the following to jest.config.js:

module.exports = {
  ...    
  setupFiles: ['./tests/unit/index.js']
  ...
}

Upvotes: 0

Riyaz Khan
Riyaz Khan

Reputation: 3288

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)

Upvotes: 3

Related Questions