我花了一天时间解决有关 Nuxt + Vuex + Vuetify with Jest 测试设置的未记录问题。
我遇到了以下问题:
Unknown custom element: <nuxt-link> - When running jest unit tests
Cannot read property 'register' of undefined
[Vuetify] Multiple instances of Vue detected
最佳答案
在收集了多个来源后,我最终完成了以下设置,我将在此处记录它以供任何人省去一天的头痛。
工作设置:
// ./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 components
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 '~/components/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()
})
})
关于javascript - 使用 Jest 测试 Nuxt + Vuex + Vuetify 的设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59810929/