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

by

3👍

✅

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)
👤Riyaz Khan

0👍

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']
  ...
}
👤ardmont

Leave a comment