admin管理员组

文章数量:1410689

I spent one day solving undocumented issues regarding testing setup for Nuxt + Vuex + Vuetify with Jest.

I had issues like:

• Unknown custom element: <nuxt-link> - When running jest unit tests

• Cannot read property 'register' of undefined

• [Vuetify] Multiple instances of Vue detected

I spent one day solving undocumented issues regarding testing setup for Nuxt + Vuex + Vuetify with Jest.

I had issues like:

• Unknown custom element: <nuxt-link> - When running jest unit tests

• Cannot read property 'register' of undefined

• [Vuetify] Multiple instances of Vue detected

• javascript
• vue.js
• jestjs
• vuetify.js
• nuxt.js

Share Improve this question Follow asked Jan 19, 2020 at 14:23 ClaudiuClaudiu 4,13022 gold badges3939 silver badges3737 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

After gathering multiple sources I've ended up with the following setup, which I'm documenting it here for anyone up for saving a day of headache.

Working setup:

// ./jest.config.js

module.exports = {
    // ... other stuff
     setupFilesAfterEnv: ['./test/jest.setup.js']
}

// ./test/jest.setup.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import VueTestUtils from '@vue/test-utils'

Vue.use(Vuetify)

// Mock Nuxt ponents
VueTestUtils.config.stubs['nuxt'] = '<div />'
VueTestUtils.config.stubs['nuxt-link'] = '<a><slot /></a>'
VueTestUtils.config.stubs['no-ssr'] = '<span><slot /></span>'

// ./test/Header.test.js

import { mount, createLocalVue } from '@vue/test-utils'
import Vuetify from 'vuetify'
import Vuex from 'vuex'

import Header from '~/ponents/layout/Header'

const localVue = createLocalVue()
localVue.use(Vuex)

let wrapper

beforeEach(() => {
    let vuetify = new Vuetify()

    wrapper = mount(Header, {
        store: new Vuex.Store({
            state: { products: [] }
        }),
        localVue,
        vuetify
    })
})

afterEach(() => {
    wrapper.destroy()
})

describe('Header', () => {
    test('is fully functional', () => {
        expect(wrapper.element).toMatchSnapshot()
    })
})

本文标签： javascriptTesting setup for NuxtVuexVuetify with JestStack Overflow