search
LoginSignup
46

More than 3 years have passed since last update.

posted at

Organization

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の単体テストがいい感じに書けて幸せになれます。

参考

https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
46