ありとあらゆるリファレンスを読みまくってまとめました。
一番スッキリJestをセットアップしよう。
Jestとは
Facebookが開発したJavaScriptの単体テストフレームワーク。
Node上で動作するため、手軽にテストを実行できる事が特徴。
作業環境
- Laravel 5.7
- Docker on Mac
- Vue.jsとかはLaravel mixのもの
セットアップ
Jestとかをnpm install
npm install --save-dev jest babel-jest @babel/core babel-core@bridge @babel/preset-env vue-jest @vue/test-utils
それぞれのひとこと説明
jest
Jest本体
babel-jest
babelとjestを連携させるもの
@babel/core
Babel本体の最新版
Babelは八百万のJavaScript構文を一定のバージョンと互換のある構文に変換するもの。
Nodeでは最新のJavaScript構文（import / exportなど含め）が動作しません。
そのため、Babelを使ってトランスパイルしてあげます。
babel-core@bridge
vue-jestが@babel/coreではなく、babel-coreを参照してしまうらしく、これを解決するためにインストール。
Babel 7.x系だけど名前はbabel-coreなBabel本体。
@babel/preset-env
山ほどあるBabelの構文変換に関わるライブラリをいい感じに自動的に使ってくれるもの。
参考 : babel-preset-envを簡単にさわってみた。 - Qiita
vue-jest
vueをjestでテストできるようにするもの
@vue/test-utils
Vueのテストを書きやすくしてくれるユーティリティ
Babelのバージョンに注意
Babel 7.xからプラグインのプレフィックスとして@babel/がつくようになりました。
6.x以前のプラグインを使うとうまく動かない事があるらしい
設定ファイルをつくる
babel.config.js (.babelrc)
Babelの設定ファイルです。
babel.config.jsでも.babelrcでもいいのでソースルートに配置します。おそらく両方あるのはよろしく無いのでどちらか片方にしましょう。
module.exports = {
presets: [
['@babel/preset-env', {modules: false}]
],
env: {
test: {
presets: [
['@babel/preset-env', {targets: {node: 'current'}}]
]
}
}
};
jest.config.js
どんなファイル名のものをテスト対象とするか、どのファイル名をどのモジュールで変換するか、などを設定できます。
module.exports = {
transform: {
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
'^.+\\.js$': '<rootDir>/node_modules/babel-jest'
},
moduleFileExtensions: [
'js',
'vue'
],
};
package.json (既存のものを編集)
Jestの起動コマンドを書き足します。
NODE_ENV=testとすることでNodeへテスト環境であることを明示しています。
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
... ,
"test": "NODE_ENV=test jest" <-追記
},
"devDependencies": { ... },
...
}
テストを書く
テストケースを作ってみましょう。
こんなファイルをテスト対象にしてみました。
カリー化してある2つの数字を足すだけの関数です。
export default{
sum(x){
return (y){
return x + y;
}
}
}
これをテストするスクリプトはこんな感じ。
import ExampleSum from "path/to/ExampleSum";
test('test sum()', ()=>{
expect(ExampleSum.sum(1)(2)).toBe(3);
}
実行してみよう
npm testとターミナルへタイプしてJestを動かしてみよう。
--でファイル名を連結することでそのファイル名と部分一致するファイルのみをテスト対象としてくれます。
npm test -- example.test.js
そのほかのCLIオプションは Jest CLI Options · Jest へ。
async/awaitもテストできる
export default {
sleep() {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, 500);
});
}
}
test('test async', async () => {
await PromiseExemple.sleep();
expect(true).toBe(true);
});
Vueのフロントエンドテストもかけます
<template>
</template>
<script>
export default {
name: "ExampleComponent",
methods: {
sum(x, y) {
return x + y;
}
}
}
</script>
<style scoped>
</style>
import ExampleComponent from "./models/ExampleComponent";
const {mount} = require("@vue/test-utils");
test('Vue component test', () => {
const component = mount(ExampleComponent);
expect(component.isVueInstance()).toBeTruthy();
expect(component.vm.sum(1, 2)).toBe(3);
});
component.vmが僕らのよく知るVueコンポーネントインスタンスです。
DOMを操作してフォーム入力をしたり、クリックしたりもできます。
@babel/preset-envがびっくりするほど便利だったことがわかった。