Two shallowmount throw error Jest VueJs(Vuetify)

Question

I'm using VueJs with Vuetify and I want to test my Component:

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

I tried the solution in: Testing Vuetify (Vue.js) - Second call on mount throws error but when I run each test independently I got no problem but when I use npm run test or jest I got the tests running with an error:

console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884 TypeError: Cannot set property '_error' of undefined console.error node_modules/vue/dist/vue.runtime.common.dev.js:621 [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'createElement' of null"

Answer 1

I don't know if this is the problem, But I added wrapper.destroy() in the end of each test and it's working now without errors

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

Please try that, if i make mistake, try to rewrite your code independently. Your problem is when you run only one test "beforeEach" section not calling. But when you run all, you many times create instance of Vuetify and LocalVue, and this is crush your tests. Hope i help you:)