Vue-Test-Utils Unknown custom element: <router-link>

Question

I'm using Jest to run my tests utilizing the vue-test-utils library.

Even though I've added the VueRouter to the localVue instance, it says it can't actually find the router-link component. If the code looks a little funky, it's because I'm using TypeScript, but it should read pretty close to ES6... Main thing is that the @Prop() is the same as passing in props: {..}

Vue component:

<template>
  <div>
    <div class="temp">
      <div>
        <router-link :to="temp.url">{{temp.name}}</router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'
import { Temp } from './Temp'

@Component({
  name: 'temp'
})
export default class TempComponent extends Vue {
  @Prop() private temp: Temp
}
</script>

<style lang="scss" scoped>
.temp {
  padding-top: 10px;
}
</style>

Temp model:

export class Temp {
  public static Default: Temp = new Temp(-1, '')

  public url: string

  constructor(public id: number, public name: string) {
    this.id = id
    this.name = name
    this.url = '/temp/' + id
  }
}

Jest test

import { createLocalVue, shallow } from '@vue/test-utils'
import TempComponent from '@/components/Temp.vue'
import { Temp } from '@/components/Temp'
import VueRouter from 'vue-router'

const localVue = createLocalVue()
localVue.use(VueRouter)

describe('Temp.vue Component', () => {
  test('renders a router-link tag with to temp.url', () => {
    const temp = Temp.Default
    temp.url = 'http://some-url.com'

    const wrapper = shallow(TempComponent, {
      propsData: { temp }
    })
    const aWrapper = wrapper.find('router-link')
    expect((aWrapper.attributes() as any).to).toBe(temp.url)
  })
})

What am I missing? The test actually passes, it just throws the warning. In fact, here is the output:

Test Output:

$ jest --config test/unit/jest.conf.js
 PASS  ClientApp\components\__tests__\temp.spec.ts
  Temp.vue Component
    √ renders a router-link tag with to temp.url (30ms)

  console.error node_modules\vue\dist\vue.runtime.common.js:589
    [Vue warn]: Unknown custom element: <router-link> - did you register the 
component correctly? For recursive components, make sure to provide the 
"name" option.

    (found in <Root>)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.677s
Ran all test suites.
Done in 6.94s.

Appreciate any help you can give!

you need to register router-link as a stub.

reddiky
– reddiky

2018-05-07 14:09:13 +00:00
Commented May 7, 2018 at 14:09 — reddiky
– reddiky, Commented May 7, 2018 at 14:09

Michael Yaworski · Accepted Answer · 2018-06-28 20:24:07Z

100

Add the router-link stub to the shallow (or shallowMount) method options like this:

const wrapper = shallow(TempComponent, {
     propsData: { temp },
     stubs: ['router-link']
})

or this way:

import { RouterLinkStub } from '@vue/test-utils';

const wrapper = shallow(TempComponent, {
     propsData: { temp },
     stubs: {
         RouterLink: RouterLinkStub
     }
})

The error should go away after you do this.

edited Jun 28, 2018 at 20:24

Michael Yaworski

13.5k19 gold badges72 silver badges98 bronze badges

answered Jun 1, 2018 at 8:25

Anna Tolochko

1,8551 gold badge17 silver badges21 bronze badges

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

4 Comments

Michael Yaworski Over a year ago

Second way worked for me. The html() function returned  wherever I was using <router-link.... After using a localVue and RouterLinkStub, it rendered my <router-link... properly to the <a... so that I could test the existence and values for data inside the <router-link. The OP was trying to use wrapper.find('router-link') and I don't think this answer solves that problem. But it solved mine, which was a similar one.

Marcelo Fonseca Over a year ago

This is not working in version 1.0.0-beta.11. For what version is this solution?

MiniGod Over a year ago

Is there a way to make the test fail instead of outputting the warning message?

Alex Deldari Over a year ago

also can use const wrapper = mount(Status, { stubs: ['router-link'] })

V. Rubinetti · Accepted Answer · 2021-10-22 20:34:57Z

6

With Vue 3 and Vue Test Utils Next (v4), it seems you just have to add your router (the return object from createRouter) as a plugin to your mountOptions:

import router from "@/router";

const mountOptions = {
  global: {
    plugins: [router],
  },
};

https://next.vue-test-utils.vuejs.org/api/#global

Or a more full example:

import router from "@/router";
import Button from "@/components/Button.vue";

const mountOptions = {
  global: {
    mocks: {
      $route: "home",
      $router: {
        push: jest.fn(),
      },
    },
    plugins: [router],
  },
};


it("Renders", () => {
  const wrapper = shallowMount(Button, mountOptions);
  expect(wrapper.get("nav").getComponent({ name: "router-link" })).toExist();
});

Note, in the example above I'm using a project setup with Vue CLI.

edited Oct 22, 2021 at 20:34

answered Oct 1, 2021 at 17:21

V. Rubinetti

2,00924 silver badges28 bronze badges

1 Comment

GuiMendel Over a year ago

accepted answer didn't work for me but this one did. Nice job!

Elmatsidis Paul · Accepted Answer · 2020-04-11 19:28:09Z

2

Worked for me:

[ Package.json ] file

...
"vue-jest": "^3.0.5",
"vue-router": "~3.1.5",
"vue": "~2.6.11",
"@vue/test-utils": "1.0.0-beta.29",
...

[ Test ] file

import App from '../../src/App';
import { mount, createLocalVue } from '@vue/test-utils';
import VueRouter from 'vue-router';

const localVue = createLocalVue();
localVue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      name: 'dashboard',
      path: '/dashboard'
    }
  ]
});

describe('Successful test', ()=>{
  it('works', ()=>{    
    let wrapper = mount(App, {
      localVue,
      router
    });

    // Here is your assertion
  });
});

Or you can try this:

edited Apr 11, 2020 at 19:28

answered Apr 11, 2020 at 18:11

Elmatsidis Paul

4851 gold badge9 silver badges21 bronze badges

Comments

TarangP · Accepted Answer · 2018-10-25 10:11:33Z

0

const wrapper = shallow(TempComponent, {
  propsData: { temp },
  localVue
})

edited Oct 25, 2018 at 10:11

TarangP

2,7385 gold badges24 silver badges42 bronze badges

answered Oct 25, 2018 at 10:06

wenfu

11

Collectives™ on Stack Overflow

Vue-Test-Utils Unknown custom element: <router-link>

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related