@Vue/test-utils shallowMount 为 vuetify 组件输出“[Vue warn]: Unknown custom element”
@Vue/test-utils shallowMount outputs "[Vue warn]: Unknown custom element" for vuetify components
我在 Vue 中的单元测试输出以下警告,不仅针对 <v-col>
,而且针对每个 vuetify 组件:
[Vue warn]: Unknown custom element: < v-col> - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
我创建了 localVue
并添加了 Vuetify
,但这似乎不起作用。这是我的测试用例:
import { shallowMount, createLocalVue } from '@vue/test-utils'
import expect from 'expect'
import ProjetoShow from '../../views/Projeto/ProjetoShow.vue'
import Vuetify from 'vuetify'
describe('ProjetoShow component', () => {
let wrapper
let localVue
beforeEach(() => {
localVue = createLocalVue()
localVue.use(Vuetify)
})
it('renders correctly', ()=> {
let vuetify = new Vuetify()
wrapper = shallowMount(ProjetoShow, {localVue, vuetify})
expect(wrapper.find('h2').text()).toContain('PROJETO')
})
})
我的软件包版本在 package.json
"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.31",
"axios": "^0.19.0",
"cross-env": "^5.1",
"expect": "^24.9.0",
"jsdom": "^15.1.1",
"jsdom-global": "^3.0.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"mocha": "^6.2.0",
"mochapack": "^1.1.5",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vue-router": "^3.1.3",
"vuetify": "^2.2.15",
"vuex": "^3.1.1"
},
在 Vuetify 关于 Unit Testing 的文档中,他们在 describe
块中声明 let vuetify
,然后在 beforeEach
中,将该变量分配给 new Vuetify()
我没有看到您在测试代码中的任何地方实际初始化 Vuetify,所以也许这就是这里所需要的。
我错误地将 vuetify 添加到 localVue
而不是 Vue
。这改变了它。根据使用的版本,这仍然会输出一些错误。如果出现问题,请将 vuetify
、@vue/test-utils
和 mocha
更新到最新版本。
import { shallowMount, createLocalVue } from '@vue/test-utils'
import expect from 'expect'
import ProjetoShow from '../../views/Projeto/ProjetoShow.vue'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(Vuetify)
describe('ProjetoShow component', () => {
let wrapper
let localVue
beforeEach(() => {
localVue = createLocalVue()
localVue.use(VueRouter)
})
it('renders correctly', ()=> {
let router = new VueRouter()
let vuetify = new Vuetify()
wrapper = shallowMount(ProjetoShow, {localVue, router, vuetify})
expect(wrapper.find('h2').text()).toContain('PROJETO')
})
})
我找到了两个不同的解决方案:
一、在测试文件中注册vuetify(暂时没找到全局声明的方法)
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
二、将存根添加到具有特定 vuetify 组件的包装器
wrapper = shallowMount(ProjetoShow, {stubs: ['v-col']})
编辑,我找到了全局声明的解决方案,有必要按照 doc 所说在测试文件夹中创建一个文件 setup.js
并在测试配置文件中添加路径,以防 jest 在 jest.config.js 添加 setupFiles: ['./tests/setup.js']
我在 Vue 中的单元测试输出以下警告,不仅针对 <v-col>
,而且针对每个 vuetify 组件:
[Vue warn]: Unknown custom element: < v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
我创建了 localVue
并添加了 Vuetify
,但这似乎不起作用。这是我的测试用例:
import { shallowMount, createLocalVue } from '@vue/test-utils'
import expect from 'expect'
import ProjetoShow from '../../views/Projeto/ProjetoShow.vue'
import Vuetify from 'vuetify'
describe('ProjetoShow component', () => {
let wrapper
let localVue
beforeEach(() => {
localVue = createLocalVue()
localVue.use(Vuetify)
})
it('renders correctly', ()=> {
let vuetify = new Vuetify()
wrapper = shallowMount(ProjetoShow, {localVue, vuetify})
expect(wrapper.find('h2').text()).toContain('PROJETO')
})
})
我的软件包版本在 package.json
"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.31",
"axios": "^0.19.0",
"cross-env": "^5.1",
"expect": "^24.9.0",
"jsdom": "^15.1.1",
"jsdom-global": "^3.0.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"mocha": "^6.2.0",
"mochapack": "^1.1.5",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vue-router": "^3.1.3",
"vuetify": "^2.2.15",
"vuex": "^3.1.1"
},
在 Vuetify 关于 Unit Testing 的文档中,他们在 describe
块中声明 let vuetify
,然后在 beforeEach
中,将该变量分配给 new Vuetify()
我没有看到您在测试代码中的任何地方实际初始化 Vuetify,所以也许这就是这里所需要的。
我错误地将 vuetify 添加到 localVue
而不是 Vue
。这改变了它。根据使用的版本,这仍然会输出一些错误。如果出现问题,请将 vuetify
、@vue/test-utils
和 mocha
更新到最新版本。
import { shallowMount, createLocalVue } from '@vue/test-utils'
import expect from 'expect'
import ProjetoShow from '../../views/Projeto/ProjetoShow.vue'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(Vuetify)
describe('ProjetoShow component', () => {
let wrapper
let localVue
beforeEach(() => {
localVue = createLocalVue()
localVue.use(VueRouter)
})
it('renders correctly', ()=> {
let router = new VueRouter()
let vuetify = new Vuetify()
wrapper = shallowMount(ProjetoShow, {localVue, router, vuetify})
expect(wrapper.find('h2').text()).toContain('PROJETO')
})
})
我找到了两个不同的解决方案:
一、在测试文件中注册vuetify(暂时没找到全局声明的方法)
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
二、将存根添加到具有特定 vuetify 组件的包装器
wrapper = shallowMount(ProjetoShow, {stubs: ['v-col']})
编辑,我找到了全局声明的解决方案,有必要按照 doc 所说在测试文件夹中创建一个文件 setup.js
并在测试配置文件中添加路径,以防 jest 在 jest.config.js 添加 setupFiles: ['./tests/setup.js']