Jest + Nuxt + Vuetify

#javascript #vue #testing

Starting from a new Nuxt app created with Jest support I was trying to get tests running but struggled to get passing tests free of vue warnings. Things like

    [Vuetify] Multiple instances of Vue detected

    [Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Solution

Globally setup Vue with Vuetify support before the tests run.

Add to jest.config.js

  setupFiles: ['<rootDir>/test/setup.js']

Setup file as recommended by the Vuetify docs

// /test/setup.js
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.config.productionTip = false
Vue.use(Vuetify)

Example test

// /test/index.test.js
import { createLocalVue, shallowMount } from '@vue/test-utils'
import index from '@/pages/index'

describe('index', () => {
  const localVue = createLocalVue()
  let wrapper

  beforeEach(() => {
    wrapper = shallowMount(index, {
      localVue
    })
  })

  test('is a Vue instance', () => {
    expect(wrapper.vm).toBeTruthy()
  })

  test('Matches Snapshot', () => {
    expect(wrapper.html()).toMatchSnapshot()
  })
})