Posted at

Jestを導入したのでメモ

More than 1 year has passed since last update.

気付いたらかいしゃが 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


package.json

{

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

--no-cache と付けるとBabel?のキャッシュが参照されなくなる。

テストコードのコンパイル時間はかかるけど、意図しないテスト結果を避けられる?


追加作業


ESLint によるテストコードのエラーの表示をなんとかしたい場合

npm i -D eslint-plugin-jest


.eslintrc

{

"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


.babelrc

{

"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"
}
}


テストコードはドキュメント読めばなんとかなりそうだったのでかつあい。

done