気付いたらかいしゃが Qiita Organizations に入っていて、記事書いてねって言われたので Jest を導入した際のメモを上げてみます。
新しいものの導入ってまあ楽しいけど、でも手間だよね。たまにドキュメント読んでも躓く箇所があったりするし。(見落としの場合もあるけど)
今回は Webpack の alias を解決する所で一瞬躓いたので、その情報共有も兼ねたいと思います。
Jest とは
Jest · 🃏快適なJavaScriptのテスト https://facebook.github.io/jest/ja/
ざっくり: Facebook製JSテストツール。 Node.js 上で実行される。
動機
- JavaScript のテスト環境とかテスト方法がよく分かってなかったので。
- 小さく疎結合にIFをシンプルにデバッグしやすく作っても、どうしてもバグは混入すると思うので、もうちょっと何かをどうにかしたい気持ちがあった。 (ふわっとしてる)
- 予想しない挙動 (=バグのことだけど...) を早めに拾えるようにしたかった。
- Mocha, Chai, Karma, ... と色々あって、何がどれでどんな役割か調べるのがめんどうくさかった。
- とりあえず触ってみようと思い、Facebookさまの Jest を選択した。
導入方法
基本作業
npm i -D jest
{
"scripts": {
"test": "jest"
}
}
--no-cache と付けるとBabel?のキャッシュが参照されなくなる。
テストコードのコンパイル時間はかかるけど、意図しないテスト結果を避けられる？
追加作業
ESLint によるテストコードのエラーの表示をなんとかしたい場合
npm i -D eslint-plugin-jest
{
"extends": ["plugin:jest/recommended"]
}
とか。
Babel, AsyncFunction を使う場合
npm i -D babel-jest regenerator-runtime
.babelrc は自動で参照してくれるらしい。
ただし、ENVには自動で test が適用されるそう。
import 構文を使う場合
Node.js は ES Modules (ESM) がまだちゃんと使えないと思うので、CommonJS形式に変換する方向で作業させると無難。もしくはそうしないと動いてくれない。
npm i -D babel-plugin-transform-es2015-modules-commonjs
{
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
テストとして実行されるファイル
デフォルトでは、 Jestの rootDir 配下にある
次のパターンのファイルをテストコードと見做して実行しようとしてくれる。 (オプションの testMatch という設定で変えられる.)
[
'**/__tests__/**/*.js?(x)',
'**/?(*.)(spec|test).js?(x)'
]
正規表現を簡単に説明すると
-
__tests__ディレクトリ配下の、全ての*.jsファイル - 全ての
*.spec.jsまたは*.test.js
となる。
Webpack の alias の解決
公式ドキュメント をチラ見しただけだと上手く動かせなくて一瞬困った。
String.replace() みたいに、 key の () でパターンマッチした値を value に $1 とか書いて置いてあげる必要があるみたい。
{
"moduleNameMapper": {
"^@utils/(.+)$": "<rootDir>/resources/assets/js/utils/$1",
"^@js/(.+)$": "<rootDir>/resources/assets/js/$1"
}
}
テストコードはドキュメント読めばなんとかなりそうだったのでかつあい。
