Webpackerで導入したVue.jsのテスト環境を構築する。

テストランナは情報量が多そうという理由でJestとやらを使うことにした。

Jestのインストール

$ yarn add --dev jest

【package.json】

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

テストの場所を定義

現時点で yarn test を実行すればテストは実行される。
しかしプロジェクト内の全ての.spec.jsと.test.jsを実行してしまうため、テストの場所を定義する必要がある。

【package.json】

"jest"： {
  “roots”： [
    "spec/javascript"
  ]
}

Babelを使えるようにする

現段階ではES2015に対応していないため、import文などが使えない。（SyntaxError: Unexpected token）

以下を実行してbabelを使えるようにしておく。

$ yarn add --dev babel-jest babel-preset-es2015

.vueをテストできるようにする

現段階では.vueファイルをimportしようとするとSyntaxErrorとなるためvue-jestを入れる。合わせてvueのテスト用ライブラリであるvue-test-utilsも入れておく。

$ yarn add --dev vue-jest
$ yarn add --dev @vue/test-utils

【package.json】

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

babe-core@bridgeを使う

ここまでの設定でyarn testするとCannot find module 'babel-core'となる。

今回使っていたwebpacker v4では@babel/core（babel v7）を使ってるけど、babel-core（babel v6）が呼ばれてるのが原因っぽい。

$ yarn add --dev babel-core@^7.0.0-bridge.0 @babel/core

vue-jestが4系になるまではこれが必要らしい。

babel / babel-bridge

モジュールの場所を定義

最後に以下を設定しておくことで、importでファイルの場所を指定する時フルパスを入力しなくて済む。

【package.json】

"jest": {
  "moduleDirectories": [
    "node_modules",
    "app/javascript"
  ]
},

Sampleを動かしてみる

【spec/javascript/sample.spec.js】

import { mount } from '@vue/test-utils'
import Sample from 'sample'

describe('Sample', () => {
  it('renders the correct markup', () => {
    const wrapper = mount(Sample)
    expect(wrapper.html()).toContain('<p>sample</p>')
  })
})

$ yarn test

参考