はじめに

Vue.jsを使った開発では、機能や役割に合わせて「コンポーネント」という単位でアプリケーションの開発を進めます。Vue.jsは、SingleFileComponent（以下SFC）と呼ばれる形式で、1つのファイル（.vue）にJavaScript、HTML、CSSをまとめる形でコンポーネントを作成できます。これをVueコンポーネントと呼ぶこともあります。

VueコンポーネントのようなデータとUIを伴う形式のコンポーネントは「UIコンポーネント」と分類され、テストの方法もJavaScriptだけを対象としたテスト*とは異なる方法が必要です。

Vueコンポーネントの振る舞いは、コンポーネントに与えるpropsや自身のdata、それに影響されるcomputedプロパティ、methodsの呼び出しなど、さまざま状態や状況によって変わります。それらのデータはtemplateによってレンダリングされ、DOMイベントと協調したり、カスタムイベントでコンポーネント同士がやり取りしたりなど、多くの要素が絡んできます。

本シリーズでは、Vueのコンポーネントの振る舞いを保証または確認するために、何をどのような方法でテストしていくかを解説します。

以降で紹介するサンプルコードは、次のリポジトリからダウンロード、またはクローンできます。併せて参照してください。

前提条件

本シリーズは次の条件を想定して書かれています。

• .vueファイルによる開発
• Node.js v7.6.x以上

.vueファイルによる開発はvue-cliを使ってvuejs-templates/webpackやvuejs-templates/webpack-simple、nuxt-community/starter-templateなどのテンプレートを利用している環境を想定しています。

Node.jsのバージョンは、async/awaitが使えるバージョンを想定しています。

Vueプロジェクトの作成

テストを追加するプロジェクトを作成します。既存のプロジェクトにテストを追加する場合は、この節を飛ばして次に進んでください。

vue-cliでプロジェクトを作成する

vue-cliを使って、webpackを使ったシンプルな構成のプロジェクトを作成します。

まずnpmからvue-cliをグローバルにインストールします。

npm install -g vue-cli

次にプロジェクトの初期化を行います。

vue init webpack-simple test_project

これでプロジェクトが作成できました。このプロジェクトにテストを実行するための環境を整えていきます。

npx vue-cli init webpack-simple test_project

コンポーネントのテストの例

テストの環境を整える前に、実際のテストケースがどのようなものか見てみましょう。

まずはコンポーネントのコードです。

<template>
  <div>
    {{text}}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    text: String,
  },
}
</script>

このコンポーネントはpropsで受け取ったtextを表示するだけの単純なものです。次のような使われ方をします。

<template>
  <div>
    <h1>すごいアプリ</h1>
    <MyComponent text="すごいテキスト" />
  </div>
</template>

このコンポーネントに対して、次のような項目のテストケースを書きます。

• propsが受け取れることを確認する
• propsで受け取った内容がレンダリングされるか確認する

これらの項目に対応するテストのコードは次のとおりです。

import {shallow} from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
describe('MyComponent.vue', () => {
  let wrapper
  beforeEach(() => {
    wrapper = shallow(MyComponent)
  })

  describe('props', () => {
    test('propsが受け取れること', () => {
      wrapper.setProps({
        text: 'hello test',
      })
      expect(wrapper.props().text).toBe('hello test')
    })
  })

  describe('template', () => {
    test('textがレンダリングされること', () => {
      wrapper.setProps({
        text: 'hello test',
      })
      expect(wrapper.text()).toBe('hello test')
    })
  })
})

このコンポーネントはテキストを表示するだけの単純なものですが、実際のプロジェクトではもう少し機能を持ったコンポーネントを作ることになります。

書き方さえ知ってしまえば、テストケースを書くのは難しいことではありません。コンポーネントに応じたテストが書けるように、本シリーズで順番に覚えていきましょう。

テストに利用するパッケージ

Vueコンポーネントのテストには主に次の2つを利用します。

• vue-test-utils
• Jest

vue-test-utilsはVue.jsの公式が提供している、Vueコンポーネントをテストするための専用ユーティリティライブラリです。Vueコンポーネントのコンパイル、コンポーネントのスタブ化やモックの注入など、テストに必要な機能を提供しています。本シリーズではこのvue-test-utilsの使い方を中心に解説していきます。

Jestはテストを実行するためのテストランナーです。上述したテストの例にあるようなdescribe、expectといった機能はJestが用意しているものです。テストに必要な機能のほとんどを備えていることもあり、テストを始めるには最適なテストランナーです。JestについてはJestで始める！ ユニットテストのシリーズに解説があります。

パッケージのインストール

テストの実行に必要なパッケージをインストールしましょう。インストールするのは次の4つです。

• @vue/test-utils （v1.0.0-beta.11）
• jest （v22.2.1）
• babel-jest （v22.2.0）
• vue-jest （v2.0.1）

次のコマンドを実行してnpmからインストールします。

npm install --save-dev @vue/test-utils jest babel-jest vue-jest

テストを実行しやすいように、package.jsonのscriptsにtestを追加します。

{
  "scripts": {
    "test": "jest"
  }
}

jest.config.jsの作成と設定

Jestで.vueファイルをテストするためには、jest.config.jsで設定を行う必要があります。プロジェクトルートにjest.config.jsを作成し、次の内容を記述します。

module.exports = {
  verbose: true,
  moduleFileExtensions: [
    "js",
    "json",
    "vue",
  ],
  transform: {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
  }
}

{
  ...
  "jest": {
    ...
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    ...
  },
  ...
}

Babelの設定

JestのテストでES Modulesの構文（importなど）を解釈できるよう、Jest用にBabelの設定を記述する必要があります。設定はプロジェクトに合わせて、.babelrcまたはpackage.jsonで行います。

次の設定は.babelrcへの記述例です。env.testの下にテストで使う設定を記述しています。

{
  "presets": [
    ["env", { "modules": false }]
  ],
  "env": {
    "test": {
      "presets": [
        ["env", { "targets": { "node": "current" }}]
      ]
    }
  }
}

package.jsonに記述する場合は、babelプロパティの下に記述します。

これでテストの実行環境が整いました。

テストを実行してみる

先述したテストの例にあるコンポーネントとテストファイルを、それぞれMyComponent.vueとMyComponent.test.jsとして作成し、テストを実行してみましょう。

<template>
  <div>
    {{text}}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    text: String,
  },
}
</script>

import {shallow} from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
describe('MyComponent.vue', () => {
  let wrapper
  beforeEach(() => {
    wrapper = shallow(MyComponent)
  })

  describe('props', () => {
    test('propsが受け取れること', () => {
      wrapper.setProps({
        text: 'hello test',
      })
      expect(wrapper.props().text).toBe('hello test')
    })
  })

  describe('template', () => {
    test('textがレンダリングされること', () => {
      wrapper.setProps({
        text: 'hello test',
      })
      expect(wrapper.text()).toBe('hello test')
    })
  })
})

wrapperはvue-test-utilsのshallowによって作成されたVueインスタンスのラッパーオブジェクトです。このオブジェクトには、このテストで使われている.setProps()や.text()といった、テストを助けるメソッドが用意されています。これらのメソッドについては、次回以降に詳しく解説していきます。

npm testでテストを実行すると、次のような結果が表示されます。

> jest

 PASS  ./MyComponent.test.js
  MyComponent.vue
    props
      ✓ propsが受け取れること (12ms)
    template
      ✓ textがレンダリングされること (1ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.833s
Ran all test suites.

これでVueコンポーネントのテストの第一歩が踏み出せました。

おわりに

今回はテスト実行環境の構築と、vue-test-utilsとJestを使った単純なVueコンポーネントのテストについて解説しました。次回はもう少し複雑なコンポーネントのテストについて、vue-test-utilsの機能を紹介しながら解説します。