我已经添加了问题Vue-Test-Utils Unknown custom element: 的解决方案,但该解决方案无效。
当我尝试在单元测试规范中运行shallowMount时遇到问题:
[Vue警告]:未知的自定义元素:-您是否注册 组件正确吗?对于递归组件,请确保 提供“名称”选项。
这是我的规范:
import { shallowMount, createLocalVue, RouterLinkStub } from '@vue/test-utils';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';
import expect from 'expect';
import Home from '../../pages/Home.vue';
describe('Home.vue', () => {
// let wrapper;
let localVue;
beforeEach(() => {
// wrapper = shallowMount(Home);
localVue = createLocalVue();
localVue.use(Vuetify)
localVue.use(VueRouter)
});
it('renders the Home page component', () => {
debugger;
let wrapper = shallowMount(Home, { localVue, stubs: { RouterLink: RouterLinkStub } });
expect(wrapper.html()).toContain('<h2>Bem-vindo (a) ao Cadastro Nacional de Informações Espeleológicas - CANIE</h2>');
});
});
我的Home.vue组件:
<template>
<v-card class="elevation-7">
<v-card-title>
<h2>Bem-vindo (a) ao Cadastro Nacional de Informações Espeleológicas - CANIE</h2>
</v-card-title>
<v-container>
<v-row class="align-center justify-space-around fill-height" my-2>
<v-btn :to="{name: 'cavernaRegister'}">CADASTRAR CAVERNA</v-btn>
<v-btn to="/caverna">CAVERNAS PENDENTES</v-btn>
<v-btn to="/relatorio">RELATÓRIO</v-btn>
</v-row>
<v-row class="justify-center" my-2>
<v-col cols="4">
<v-card>
<v-card-title primary-title class="headline">
<div>
<h3 class="headline mb-0">Cavernas por Estados</h3>
</div>
</v-card-title>
<v-divider></v-divider>
<div id="canvas-holder">
<canvas id="chart-area"></canvas>
</div>
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
<script>
import colors from 'vuetify/es5/util/colors'
import Chart from 'chart.js'
export default {
name: 'Home',
data(){
return {
config: { ...
},
}
},
mounted(){
let ctx = document.getElementById('chart-area').getContext('2d');
window.doughnutChart = new Chart(ctx, this.config);
},
}
</script>
我正在使用@vue/test-utils: "^1.0.0-beta.31"
和mocha "^6.1.4"
。是否有解决此问题的解决方法?
答案 0 :(得分:3)
我在vue测试实用程序documentation中找到了一个如何对router-view
和router-link
进行存根的示例:
import { shallowMount } from '@vue/test-utils'
shallowMount(Component, {
stubs: ['router-link', 'router-view']
})
答案 1 :(得分:0)
2021 年更新: 现在需要将其设置为全局属性
import { shallowMount } from '@vue/test-utils'
shallowMount(Component, {
global: {
stubs: ['router-link', 'router-view']
}
})