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系になるまではこれが必要らしい。
モジュールの場所を定義
最後に以下を設定しておくことで、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