我已经添加了问题 Vue-Test-Utils Unknown custom element: 中的解决方案它不工作。
当我尝试在我的单元测试规范中运行shallowMount 时遇到问题:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
这是我的规范:
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"
.是否有针对此问题的修复或解决方法?
最佳答案
我在 vue 测试工具中找到 documentation如何 stub 的示例 router-view
和 router-link
:
import { shallowMount } from '@vue/test-utils'
shallowMount(Component, {
stubs: ['router-link', 'router-view']
})
关于vue.js - @vue/test-utils 未知的自定义元素 : <router-view>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59987665/