测试使用 Vuetify 的 NuxtJS 组件答案

【问题标题】：Testing NuxtJS Components that use Vuetify测试使用 Vuetify 的 NuxtJS 组件
【发布时间】：2020-05-14 19:58:26
【问题描述】：

我想在使用 Vuetify 的 NuxtJS 项目中对组件进行单元测试。当我想选择一个按钮（v-btn）时，jest 会输出以下内容：

 [vue-test-utils]: find did not return .v-btn, cannot call text() on empty Wrapper

我按照 vuetify 的官方文档进行单元测试。

// myComponent.vue

<template>
  <v-menu offset-y>
    <v-btn color="primary">
      myLabel
    </v-btn>
  </v-menu>
</template>

<script>
export default {
}
</script>

// myComponent.spec.js
import { createLocalVue, mount } from '@vue/test-utils'
import Vuetify from 'vuetify'
import MyComponent from '~/components/MyComponent'

describe('Index Switch', () => {
  const localVue = createLocalVue()
  let wrapper
  let vuetify

  beforeEach(() => {
    vuetify = new Vuetify()
    wrapper = mount(MyComponent, { localVue, vuetify })
  })

  it('should have index switch button', () => {
    const myButton = wrapper.find('.v-btn')
    expect(myButton.text()).toBe('myLabel')
  })
})

有什么想法吗？

【问题讨论】：

标签： vue.js jestjs vuetify.js nuxt.js

【解决方案1】：

它对我有用

希望你的问题也能解决

在像home.spec.test这样的测试文件中

const vuetify = new Vuetify()
Vue.use(Vuetify)
let localVue = createLocalVue()
localVue.use(vuetify)

"nuxt": "^2.14.6"
"@nuxtjs/vuetify": "^1.11.2",

【讨论】：