使用 Jest 测试 Nuxt + Vuex + Vuetify 的设置

Posted 2023-02-22

【中文标题】使用 Jest 测试 Nuxt + Vuex + Vuetify 的设置

【英文标题】：Testing setup for Nuxt + Vuex + Vuetify with Jest

【发布时间】：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

【参考方案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-s-s-r'] = '<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.