概要

VueRouter を使ったコンポーネントのユニットテストの書き方について簡単にまとめています。

以下のようにテスト対象のコンポーネントが RouterLink を使用しているとします。

<template>
  <router-link to="/foo">
</template>

RouterLink は直接 import することができないので何かで代用する必要があります。

VueTestUtils には RouterLinkStub というものが用意されているのでこれを使用します。
shallowMount のコンストラクタに渡してやることで文字通り RouterLink のスタブとして機能します。

import { shallowMount, createLocalVue, RouterLinkStub } from "@vue/test-utils";

const localVue = createLocalVue();
import HelloWorld from "@/components/HelloWorld";

describe("HelloWorld.vue", () => {
  test("fooへのリンクがある", () => {
    const wrapper = shallowMount(HelloWorld, {
      localVue,
      stubs: { RouterLink: RouterLinkStub },
    });
    expect(wrapper.findComponent(RouterLinkStub).props().to).toBe("/foo");
  });
});

$route プロパティをテストする

$route プロパティをテストする場合はもっと簡単です。
$route.params.id の値を表示するコンポーネントがあるとします。

<template>
  <div>{{ $route.params.id }}</div>
</template>

この場合は、shallowMount のコンストラクタに mocks としてモックした$route プロパティを渡します。

describe("HelloWorld.vue", () => {
  test("$route.id プロパティの値を表示する", () => {
    const mocks = {
      $route: {
        params: { id: "bar" },
      },
    };
    const wrapper = shallowMount(HelloWorld, {
      localVue,
      mocks,
    });
    expect(wrapper.text()).toContain("bar");
  });
});