share facebook facebook twitter menu hatena pocket slack

2018.09.27 THU

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

甲斐 甲

WRITTEN BY 甲斐 甲

概要

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

環境

Vue CLIを利用してプロジェクトを用意します。
開発環境やプロジェクト作成方法についてはこちらご参照ください。

DockerでVue.js+TypeScript開発環境を構築する
https://cloudpack.media/43078

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://cloudpack.media/43084

元記事はこちら

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

甲斐 甲

甲斐 甲

2018/7にJOIN。 最近の好みはサーバレスです。なんでもとりあえず試します。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。