概要
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
<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
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が認識されるようにテストを変更します。
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