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

Posted 2023-02-22

【中文标题】两个 shallowmount 抛出错误 Jest VueJs(Vuetify)

【英文标题】：Two shallowmount throw error 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”

【参考方案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() 并且它现在可以正常工作