@vue/test-utils Unknown custom element: <router-view>

Question

I've added the solution from question Vue-Test-Utils Unknown custom element: and its not working.

I'm having problems when I try to run shallowMount in my unit test spec:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

This is my spec:

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>');
    });
});

my Home.vue component:

<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>

I'm using @vue/test-utils: "^1.0.0-beta.31" and mocha "^6.1.4". Is there a fix or workaround for this issue?

Marcelo Fonseca · Accepted Answer · 2020-03-09 14:07:04Z

5

I found in vue test utils documentation an example how to stub router-view and router-link:

import { shallowMount } from '@vue/test-utils'

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

answered Mar 9, 2020 at 14:07

Marcelo Fonseca

1,8542 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fernando Herrera · Accepted Answer · 2021-07-30 20:01:28Z

4

2021 Update: Now you need to set it into a global property

import { shallowMount } from '@vue/test-utils'

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

answered Jul 30, 2021 at 20:01

Fernando Herrera

6791 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

@vue/test-utils Unknown custom element: <router-view>

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related