【问题标题】:Testing setup for Nuxt + Vuex + Vuetify with Jest使用 Jest 测试 Nuxt + Vuex + Vuetify 的设置
【发布时间】:2020-05-05 17:35:46
【问题描述】:

我花了一天时间解决有关 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

【问题讨论】:

    标签: javascript vue.js jestjs vuetify.js nuxt.js


    【解决方案1】:

    在收集了多个来源后,我最终完成了以下设置,我将在此处记录它以供任何人省去一天的头痛。

    工作设置:

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

    【讨论】:

    • 请注意,使用字符串存根会引发控制台错误:[vue-test-utils]: Using a string for stubs is deprecated and will be removed in the next major version.
    猜你喜欢
    • 2021-03-17
    • 2020-06-25
    • 2021-01-06
    • 2019-02-28
    • 2020-11-25
    • 2019-05-21
    • 2019-09-20
    • 2020-12-16
    相关资源
    最近更新 更多