@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-viewrouter-link 的示例:

import  shallowMount  from '@vue/test-utils'

shallowMount(Component, 
  stubs: ['router-link', 'router-view']
)

【讨论】:

以上是关于@vue/test-utils 未知的自定义元素:<router-view>的主要内容,如果未能解决你的问题,请参考以下文章

Vue警告:未知的自定义元素

[Vue 警告]:未知的自定义元素

如何修复错误 [Vue 警告]:未知的自定义元素?

Vuetifyjs错误未知的自定义元素:您是不是正确注册了组件

未知的自定义元素和指令

未知的自定义元素:<VueTerminal> - 您是不是正确注册了组件?