167
122

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ついに jest の軍門に降った

Last updated at Posted at 2017-11-13

もう駄目だ。ついに React 以外のプロジェクトでも Jest 一択になってしまった。

もともと自分の選択するテストツールは、むかしは jasmine、いまは mocha + chai(ときどき power-assert) をベースに周辺ツールと連携させていて、React を使うようになってしばらくして Jest を入れるようになった。ここ5年くらいのフロントエンド界隈では標準の一種だと思う。

それがどうしてこんなに Jest びいきになったのか。

その1. 楽

とにかく楽だからだ。

Jest の売りはオール・イン・ワンとゼロ・コンフィグというだけあって、構築がとりわけ楽。

1パッケージ入れるだけでざっと以下の機能が使えるようになる。

  • テストランナー(mocha, jasmine 1
  • アサーション(chai, jasmine)
  • モック(sinon, testdouble)
  • カバレッジ(istanbul)

とくにカバレッジがオプションひとつ足すだけで使えるのは大きい。

使い慣れたツールがあるひとは抵抗あるかもしれないが、書き心地はそこまで違わないので、新規での移行コストは高くないはず。

その2. ウォッチが賢い。

ウォッチモードで起動すると、ファイル変更時に依存関係のあるテストだけ走る。

対話用のUIも洗練されていて、全部走らせたい、ウォッチをやめたいといった場合もキーひとつで済む。

さらにつぎに述べるスナップショットテストの更新も同様に必要があればキーひとつでできる。

その3. スナップショットテスト

Jest を手放せない一番の理由がこれ。

Jest には React の仮想DOMと呼ばれるHTMLのツリー構造をJSONでダンプし、以降はそれとの差分で判定する「スナップショットテスト」と呼ばれる機能が標準で入っている2。自働UIテストをやったことがあるひとはスクリーンショットに相当するものと思えばいい。

これを例えばファイル読み込みや、APIの出力、データ変換のプログラムに応用すると回帰テストがとても楽に書ける。サーバーレスやデータ・ドリブンのプログラムのプログラムではこれが効いてくる。

その4. だめなところがなくなってきた

これはマイナスがゼロになったという話だけれど、以前の Jest はデフォルトであらゆるモジュールの import/require をモックするというはた迷惑な癖の強い挙動をしていた。自分の場合、これが最後まで障壁になっていたのだけれど、バージョン15から明示的に指定したものだけモックの対象になっている。やったね。

その5. とはいえ問題がないわけではない

総合的にみてとっくに実用レベルに達していると思うが、いくつか問題に遭遇することもあるし、ツール外でイマイチなところも残っている。

自分が思い出せるところでいうと:

mac の特定のバージョンでは watchman をアップグレードしないと実行時エラーになる。

Benchmark.js と組み合わせるとこける。これは jest のデフォルトの環境が js-dom だからで明示的に node に設定しないとブラウザだと判別されてしまう。このあたり、やはり癖がある。

TypeScript から使おうとすると追加のパッケージ + お約束の config がいる。mocha と比べると少しだけ手間が大きい。

全般にエコシステムが未成熟。エディタやIDE との統合、karma からの実行などなど……求めていけば切りがない3。ただ Facebook 製なので今後いきなりハシゴを外されたりはしないだろうし、導入する時期としては十分だと思われる。

  1. というかベースが Jasmine2 である。

  2. いまではほかのテストランナー用のもある。が、組み込みであるのは Jest と Storybook だけである。(2018/1/22追記:ava にも入っていました。知らなかった。)

  3. Jest 自体 Karma では Mocha を使っている

167
122
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
167
122

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?