Vue Test Utils + Jest でVue.jsの単体テストを行う

Vue Test Utilsを使うとVue.jsでテスト行うための便利機能が色々そろっているので、簡単にテストが書けます。

Vue Test UtilsはJest、Karma、Mochaなどのテストランナーと組み合わせて使います。

ここではJestを使っての導入手順を書いていきます。

環境

• node: 9.11.2
• yarn: 1.7.0
• vue: 2.5.17
• @vue/test-utils: 1.0.0-beta.24

パッケージインストール

$ yarn add -D @vue/test-utils babel-jest jest vue-jest

設定(Jest)

package.jsonを編集

{
.
.
.
  "scripts": {
    .
    .
    "test": "jest"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!vue-awesome|vuex-i18n)"
    ],
    "transform": {
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  }
}

• moduleFileExtensions : テストするファイル拡張子の指定。
• transformIgnorePatterns : 変換時に無視するファイルを指定。無視したくないモジュールがある場合は上記のように書ける。
• transform : 変換を行うモジュールの指定。
• moduleNameMapper : パスを省略できる。この場合、例えば your_project_path/src/example.js にあるとすれば、 @/example.js と書ける。

あとは、

$ yarn test

と打つとテストできます。

設定(Babel)

.babelrcを作成、編集します。ESのトランスパイルをテスト時に有効にするための記述です。

これを書かないと自分の環境では import が使えないとかでエラーが出ました。

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

テストを書く

テストは .spec.js や .test.js といったファイルがあれば自動検知してテストしてくれます。

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

describe('ExampleComponent', () => {
  it('is a Vue instance', () => {
    const wrapper = mount(ExampleComponent);
    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});

といった感じにテストかけます。

子コンポーネントの影響を受けずにテストしたい場合は、shallowMount を使ったりします。

プラグインが必要な場合は、

import {mount, createLocalVue} from '@vue/test-utils';
import ExampleComponent from '@/ExampleComponent';
import ElementUI from 'element-ui';

const localVue = createLocalVue();
localVue.use(ElementUI);

describe('ExampleComponent', () => {
  it('is a Vue instance', () => {
    const wrapper = mount(ExampleComponent, { localVue });
    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});

propsを渡して結果をみるテストを書きたい場合は、

例えば、ExampleComponentが以下のようにあったとして、

<template>
  <div class="title">{{ title }}</div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  props: {
    title: {
      default: '',
      type: String
    }
  }
};
</script>

テストは、

import {mount, createLocalVue} from '@vue/test-utils';
import ExampleComponent from '@/ExampleComponent';

describe('ExampleComponent', () => {
  it('renders props.title when passed', () => {
    const title = 'てすと';
    const wrapper = mount(ExampleComponent, { 
      propsData: { title }
    });
    const div = wrapper.find('.title');
    expect(div.text()).toBe(title);
  });
});

のように書けます。

そのほかにも trigger でクリックイベントが呼べたりなど、Vueの単体テストがいい感じに書けて幸せになれます。

参考