两个浅挂载抛出错误 Jest VueJs(Vuetify).

Question

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

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)
})
})

我尝试了以下解决方案：测试 Vuetify (Vue.js( - 挂载上的第二次调用抛出错误 但是当我独立运行每个测试时，我没有问题，但是当我使用 npm 运行测试或开玩笑时，我让测试运行并出现错误：

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

Answer 1

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

Answer 2

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的实例，这是粉碎你的测试。希望我能帮助你:)