環境の準備とテストの実行JavaScriptのユニットテストのためのツール、Jestの特徴や基本的な使い方を解説します。「そろそろテストを書く習慣を付けたい」、そう思う人のための始めの一歩です。挙動をカスタマイズするまとめJestとはJestは、Facebook社がOSSとして開発を進めている、JavaScriptのユニットテストのためのツールです。Testing日本語のドキュメントJestは日本語のドキュメントもあります。日本語で基本的な部分を知るのに役立ちますが、情報が追いついていない場合もありますので、最新情報は英語ドキュメントを参照するようにしてください。platform」と謳っているように、あれこれ設定をすることなく、他の依存ライブラリを追加することもなく、誰でもすぐにユニットテストを書き始められるようになっているのが特徴です。このシリーズでは、Jestの特徴を紹介しながら、実際にどのようなコードでテストを書くことができるのか、その際にどのような便利な機能が使えるのかを解説していきます。そもそもテストについてあまり詳しくない・自信がない場合は、先にJavaScript開発のためのテスト入門や、実践、ユニットテストなどのシリーズを一通り読むことをオススメします。Jestを選ぶ理由まずはじめに、筆者が今Jestを選ぶ理由について解説します。筆者がJestを選ぶ一番の理由は、依存が少なく高機能であることです。プロジェクトの規模が一定以上になってくると、テストのためのライブラリやツールが必要になってきます。その際に必要となるライブラリはいくつかの構成要素に分けられます。テストランナーアサーションテストモック・テストダブルテストの程度にもよるのですが、テストのありがたみを感じられる規模のプロジェクトでは、この3つが必要になってくるイメージがあります。それぞれの要素ごとに、いくつものライブラリが存在します。テストランナーであれば、次のライブラリのいずれかを選択することが多いように思います。MochaJasmineAVAtapeetc...次にアサーションに使うライブラリの場合です。should.jsExpectchaipower-assertetc...最後に、テストモック・テストダブルによく使われるライブラリです。Sinon.jstestdouble.jsetc...これらのライブラリはそれぞれ重複する機能もありますが、特徴として差別化されている点もあります。これだけの中でベストな組合せはどうやって見つければよいのでしょうか?(もちろん答えはなく、それぞれの好みに応じた選択をしていくことになるのですが)これだけではなく、たとえばテストのカバレッジを取りたいとなれば、またそのためのライブラリを探し、用意する必要が出てきます。このように好きなものを好きなように組合せて使うことができるのは利点である反面、それを選ぶ力のない人にとっては不都合でしかありません。Jestを選んだ場合、上述した機能はすべて含まれています。オールインワンなJestだけを依存に追加すれば、すぐにテストコードを書き始められるようになるのです。「選択肢が多すぎて、テストを書き始める前の段階で足踏みをしてしまう」状況を解消するために、Jestが開発されたのではないかと筆者は考えており、これこそが今Jestを選ぶ理由です。インストールと実行Jestを選ぶ理由が理解できたところで、実際にインストールし、テストを書いていくステップに進みます。何はともあれ環境を構築し、テストを書いてみることが一番です。Jestの使い方は、公式ページに詳しく掲載されています。Jestまずはインストールから始めます。必要なものはjestパッケージのみです。jest他のライブラリと同じく、npmから入手することができます。記事執筆時点のJestの最新バージョンは、22.0.1です。後で実行しやすいように、package.jsonのscriptsに次のように追加するとよいでしょう。testとすることでユニットテストが実行できるようになります。次に、テストしたい対象のモジュールを適当に用意しましょう。b;}与えられた2つの引数をただ足し合わせるだけの簡単なモジュールです。このモジュールのテストを用意します。テストコードの書き方については、次回以降詳しく解説しますので、今は流れをつかんでください。2)).toBe(3);});この時点のファイル構成は、次のようになるはずです。sum.test.js準備はたったこれだけです。testとして動かしてみると、テストが実行されて結果が表示されます。suites.設定ファイルも何も用意せず、ユニットテストを実行することができました。結果を見てみましょう。検証が成功して問題がなかった場合は上のようのPASSと表示されます。検証に失敗する(問題があった場合)とFAILと表示されます。そのほかの項目は、次のことを示しています。挙動をカスタマイズするこのように、設定ファイルがなくても動くJestですが、設定が変更できないわけではありません。実行時にCLIのオプションとして渡すCLIにのみ有効なオプションもあるこれらのいずれか、または組合せで挙動のカスタマイズが可能です。指定できるオプションの一覧CLIで指定できるオプションの一覧オプションの一覧を見てわかるように、たくさんのカスタマイズできる内容があります。筆者としてもそれらの設定すべてを把握しているわけではなく、必要になったときに調べて利用する程度です。ここでは逆引き的に、最低限知っておくとよいカスタマイズ方法や使い方をいくつか解説します。テスト対象のファイル、ディレクトリを指定する先ほどのインストールの例で、Jestはテスト対象のファイルを指定することなくテストを実行できました。そこには、testRegexというオプションのデフォルト指定が効いています。デフォルトのtestRegexは、/__tests__/.*|(\\.|/)(test|spec))\\.jsx?$となっています。.test.jsで終わるファイル先ほどのsum.test.jsが実行されたのはこの正規表現にマッチしていたからです。テストファイルを配置するディレクトリに、テストコードではないがテストのためのヘルパーなどを用意することがあると思いますが、その際にはこのオプションを利用することでテストファイルだと判別されないようにできます。testRegexによく似たオプションとして、testMatchがあります。基本的には、testRegexで事足りると思いますが、正規表現が複雑になるのを避けたい場合などは、testMatchを使うと良いです。これらはどちらか片方しか使えないことに留意してください。testPathIgnorePatternsにパスの配列を指定することで、逆にブラックリストとして除外することもできます。こちらのデフォルト値は、["/node_modules/"]となっています。任意のディレクトリにテストファイルを配置したい場合に使えるオプションとして覚えておいてください。watchモードで起動するCLIのオプションで--watchを指定することで、gulpやwebpackのように、テストコードに変更がある度にテスト実行することができるモードで起動できます。--watchJestのwatchモードはとても賢く、GitやMercurial(Hg)で差分となっているファイルのみを対象として実行してくれます。よって、差分がない状態だと何も実行しないため、その場合は--watchAllオプションを利用します。この差分に影響ある内容だけをテストする機能は、-oオプションとして通常モード時に実行することもできます。テスト結果のログを調整するいくつか関連するオプションやCLIの引数があります。console.log()やconsole.error()などを非表示verboseは、オプションとして設定ファイルに記載することもできます。ソースコード内にconsole.log()が記述されていると、そのコードがテストケースで実行された場合にも、テスト結果のログとして出力されてしまいます。実行結果が見づらくなってしまうのを回避するために、筆者は次の使い方をすることが多いです。--verboseデフォルトは--silentを有効にしておきつつ、普段はそれを引数で上書きして使っています。テストカバレッジを計測するCLIのオプションで--coverageを指定することで、テストのカバレッジを計測できます。細かな設定が必要な場合は、collectCoverageをはじめとする次の指定を設定ファイルに記載します。[object]オプションの詳細は、先のCLIで指定できるオプションの一覧を参照してください。まとめ今回の記事では、なぜJestが開発されたのか、なぜJestを選ぶのかについて解説しました。インストールから最低限のユニットテストを実行するまでの流れについても解説しました。次回以降の記事では、テストコードそのものにフォーカスして、Jestのさらなる機能を見ていきます。有右嗣フロントエンド・エンジニア業務系SIerにて主にWebサービス開発の上流工程を経験した後、大手インターネット企業に転職。ソーシャルゲームをはじめとする、モバイル向けWebサービスのフロントエンド開発を数多く経験する。2015年株式会社ピクセルグリッドへ入社。フロントエンドはもちろん、サーバーサイドやネットワークの知識も豊富である。特定商取引法に基づく。