Vue，如何测试子组件（通过 v-show 显示）是否可见

Question

我正在尝试弄清楚如何测试（使用 vue test utils & jest）子组件（通过 v-show 显示）当前是否可见（与子组件的内容无关） ).

我的 vue html 代码如下所示：

<ChildComponent v-show="isShowing"/>

我不知道如何测试它。我遇到了这个：https://github.com/vuejs/vue-test-utils/issues/327#issuecomment-355501127 然而，wrapper.findComponent(...).hasStyle is not a function.

我能想到的最接近的是测试布尔值：

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

我知道如何测试它是否在使用 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

谁能指出我正确的方向？提前致谢！

Answer 1

有一种方法可以测试，使用isVisible方法。

isVisible() 方法检查 display:none 与否，也可以测试 visibility:hidden 和 opacity :0

这是您的代码示例：

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

如果该组件是主要包装器，则可以这样使用：

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

Answer 2

我也遇到了同样的情况，通过在 test/unit 中创建一个 jest setup file 作为 index.js 文件解决了这个问题，代码如下：

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

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

Vue.config.productionTip = false

然后我将以下内容添加到 jest.config.js：

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

Vue，如何测试子组件（通过 v-show 显示）是否可见

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

vue.js

jestjs

vue-component

vue-test-utils