DEV Community

loading...

Jest + Nuxt + Vuetify

mftruso profile image Mike Truso ・1 min read

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    
Enter fullscreen mode Exit fullscreen mode

or

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

Solution

Globally setup Vue with Vuetify support before the tests run.

Add to jest.config.js

  setupFiles: ['<rootDir>/test/setup.js']
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Happy testing!

Discussion (1)

pic
Editor guide
Collapse
bawa_geek profile image
Lakhveer Bawa

I also struggled a lot, I also wrote an article after my struggle, you can check here dev.to/bawa_geek/how-to-setup-jest...