两个 shallowmount 抛出错误 Jest VueJs(Vuetify)答案

【问题标题】：Two shallowmount throw error Jest VueJs(Vuetify)两个 shallowmount 抛出错误 Jest VueJs(Vuetify)
【发布时间】：2020-09-01 15:15:05
【问题描述】：

我正在使用 VueJs 和 Vuetify，我想测试我的组件：

import { shallowMount, createLocalVue } from '@vue/test-utils'
import UserRating from '@/views/dashboard/pages/User_Ratings.vue'
import BaseMaterialCard from '@/components/base/MaterialCard'
import Vuetify from 'vuetify'
let localVue

describe('user ratings Component Unit test', () => {
  let vuetify
  beforeEach(() => {
    localVue = createLocalVue()
    vuetify = new Vuetify()
    localVue.use(vuetify)
  })
  it('is a Vue instance', () => {
    const msg = 'new message'
    const wrapper = shallowMount(UserRating, {
      localVue,
      vuetify,
      sync: false,
      propsData: { msg },
    })

    expect(wrapper.isVueInstance()).toBeTruthy()
  })
  it('Checks the data-title', () => {
    const wrapper = shallowMount(UserRating, {
      localVue,
      vuetify,
      sync: false,
    })
    expect(wrapper.vm.title).toMatch('Users Reviews')
  })
  it('renders the reviews list', () => {
    const wrapper = shallowMount(UserRating, {
      localVue,
      vuetify,
      sync: false,
    })
    expect(wrapper.html()).toContain('v-simple-table')
  })
  it('check if child BaseMaterialCard exists', () => {
    const wrapper = shallowMount(UserRating, {
      sync: false,
    })
    expect(wrapper.contains(BaseMaterialCard)).toBe(true)
  })
})

我尝试了解决方案：Testing Vuetify (Vue.js) - Second call on mount throws error 但是当我独立运行每个测试时，我没有遇到任何问题，但是当我使用 npm run test 或 jest 时，测试运行时出现错误：

console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884 TypeError：无法设置未定义的属性“_error” console.error node_modules/vue/dist/vue.runtime.common.dev.js:621 [Vue警告]：nextTick中的错误：“TypeError：无法读取属性'createElement' of null”

【问题讨论】：

标签： javascript unit-testing vue.js jestjs vuetify.js

【解决方案1】：

import { shallowMount, createLocalVue } from '@vue/test-utils'
import UserRating from '@/views/dashboard/pages/User_Ratings.vue'
import BaseMaterialCard from '@/components/base/MaterialCard'
import Vuetify from 'vuetify'
const localVue = createLocalVue()
const vuetify = new Vuetify()
localVue.use(vuetify)

describe('user ratings Component Unit test', () => {
  it('is a Vue instance', () => {
    const msg = 'new message'
    const wrapper = shallowMount(UserRating, {
      sync: false,
      propsData: { msg },
    })

    expect(wrapper.isVueInstance()).toBeTruthy()
  })
  it('Checks the data-title', () => {
    const wrapper = shallowMount(UserRating, {
      sync: false,
    })
    expect(wrapper.vm.title).toMatch('Users Reviews')
  })
  it('renders the reviews list', () => {
    const wrapper = shallowMount(UserRating, {
      sync: false,
    })
    expect(wrapper.html()).toContain('v-simple-table')
  })
  it('check if child BaseMaterialCard exists', () => {
    const wrapper = shallowMount(UserRating, {
      sync: false,
    })
    expect(wrapper.contains(BaseMaterialCard)).toBe(true)
  })
})

请尝试一下，如果我犯了错误，请尝试独立重写您的代码。您的问题是当您只运行一个测试“beforeEach”部分时没有调用。但是当你全部运行时，你会多次创建 Vuetify 和 LocalVue 的实例，这会破坏你的测试。希望能帮到你:)

【讨论】：

【解决方案2】：

我不知道这是否是问题所在，但我在每个测试结束时添加了 wrapper.destroy() 并且它现在可以正常工作

【讨论】：