@vue/test-utils 未知的自定义元素:<router-view>
Posted
技术标签:
【中文标题】@vue/test-utils 未知的自定义元素:<router-view>【英文标题】:@vue/test-utils Unknown custom element: <router-view> 【发布时间】:2020-05-16 03:58:19 【问题描述】:我添加了来自问题 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"
。是否有针对此问题的修复或解决方法?
【问题讨论】:
【参考方案1】:2021 年更新: 现在您需要将其设置为全局属性
import shallowMount from '@vue/test-utils'
shallowMount(Component,
global:
stubs: ['router-link', 'router-view']
)
【讨论】:
【参考方案2】:我在 vue test utils documentation 中找到了一个如何存根 router-view
和 router-link
的示例:
import shallowMount from '@vue/test-utils'
shallowMount(Component,
stubs: ['router-link', 'router-view']
)
【讨论】:
以上是关于@vue/test-utils 未知的自定义元素:<router-view>的主要内容,如果未能解决你的问题,请参考以下文章