Edited at

Vue.js+TypeScriptのテストでRouterLinkがないって怒られたときの対応

More than 1 year has passed since last update.


概要

Vue.jsのRouterはmain.tsで読み込んでると、コンポーネントなどでrouter-link を意識せずに利用できて便利なのですが、コンポーネントの単体テストを書いているとそんなコンポーネント知らない!と怒られるので対応します。


環境

Vue CLIを利用してプロジェクトを用意します。

開発環境やプロジェクト作成方法についてはこちらご参照ください。

DockerでVue.js+TypeScript開発環境を構築する

https://qiita.com/kai_kou/items/d581a9f8f3ee8605aed1

GitHubにも今回利用したソースをUPしていますので、よかったらどうぞ。

https://github.com/kai-kou/vue-js-typescript-import-router-link


再現

以下のようにコンポーネントを作成します。

> touch src/components/Hoge.vue

> vi src/components/Hoge.vue


src/components/Hoge.vue

<template>

<router-link to="/">
リンク!
</router-link>
</template>

<script lang="ts">
import {
Component,
Vue,
} from 'vue-property-decorator';

@Component
export default class Hoge extends Vue {}
</script>


テストも用意します。

> touch tests/unit/Hoge.spec.ts

> vi touch tests/unit/Hoge.spec.ts


tests/unit/Hoge.spec.ts

import { expect } from 'chai';

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

import Hoge from '@/components/Hoge.vue';

describe('Hoge.vue', () => {
it('RouteLinkが利用できるか', () => {
const wrapper = shallowMount(Hoge, {});

wrapper.is(Hoge);
expect(wrapper.findAll('router_link')).to.length(1);
});
});


テストを実行します。

> yarn test:unit

Hoge.vue
[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

---> <Hoge> at src/components/Hoge.vue
<Root>
✓ RouteLinkが利用できるか (69ms)

1 passing (119ms)

MOCHA Tests completed successfully

はい。

テストはパスしますが、[Vue warn] がでてしまって気持ち悪いです。

モヤモヤします。

なんとかしたいです。

router-linkが認識されるようにテストを変更します。


tests/unit/Hoge.spec.ts

import { expect } from 'chai';

import { createLocalVue, shallowMount } from '@vue/test-utils';
import Router from 'vue-router';

import Hoge from '@/components/Hoge.vue';
const localVue = createLocalVue();
localVue.use(Router);
const RouterLink = localVue.component('router-link');

describe('Hoge.vue', () => {
it('RouteLinkが利用できるか', () => {
const wrapper = shallowMount(Hoge, { localVue });

wrapper.is(Hoge);
expect(wrapper.findAll(RouterLink)).to.length(1);
});
});


では、再度テストを実行してみます。

> yarn test:unit

MOCHA Testing...

Hoge.vue
✓ RouteLinkが利用できるか (95ms)

1 passing (264ms)

MOCHA Tests completed successfully

やったぜ。


参考

Expose RouterLink and RouterView components #1976

https://github.com/vuejs/vue-router/issues/1976

Vue.js+TypeScriptで開発するときの参考記事まとめ

https://qiita.com/kai_kou/items/19b494a41023d84bacc7