JestでReactアプリをテストする！テストケースの書き方と実行の方法。

この記事では、今もっとも人気のあるJSテストフレームワークであるJestについてその概要と使い方を説明したい。

JSフレームワークには「Jest」「Jasmine」「Mocha」などがあり、使用するフレームワークに使い分けられることが多かったが、最近ではどのフレームワークを使用しているかに関わらずJestを導入する企業が増えてきている。

ここではそんなJestの魅力について分析してみたい！

Jestとは？

Jestオフィシャルページ:: https://jestjs.io

JestはJavaScriptプロジェクトのためのテストフレームワーク。

元々はReactプロジェクトのために作られたフレームワークだが、AngularやVueのプロジェクトでも使用できる。2022年現在では、もっとも人気の高い単体テスト（ユニットテスト）のためのテストフレームワークとなっている。

なお、同じくJavaScriptのためのテストフレームワークであるJasmineについて知りたい人はこちらの記事も参考にしてほしい。

関連記事

Angularの単体テストの書き方。テストフレームワーク（Jasmine / Karma）。

この記事では、Angularの単体テスト（ユニットテスト）について初心者向けに概要と書き方を説明していく。 Webアプリケーションの開発においてもテストの重要度は年々上がっている。 […]

Jestの使い方

Jestのインストール

JestをReactアプリに使用する場合、ReactのパッケージにJestがあらかじめ含まれているので、あらためてインストールする必要はない。

AngularやVue.jsアプリに使用する場合は以下のコマンドでJestをインストールする。

npm install --save-dev jest

テストを実行する

次にテストを実行してみよう。

“create-react-app”コマンドを使用してReactアプリを作成した場合、標準でApp.test.jsというテストファイルが作成される。「.test.js」はテストファイルのための拡張子だ。

npm test

テストを実行するとひとつのテストケースが実行され、通常であればテストは合格となるはずだ。

対象のファイルを指定して実行する

特定のテストファイルのみを実行したい場合は「npm test」の後にファイル名を書いて実行する。

npm test App.test.js

対象のテストケースを指定して実行する

特定のテストケースのみを実行したい場合は、テストの名前をして実行する。

npm test -- -t 'renders learn react link'

テストファイルの作成

まずはテストファイルを作成する。ファイル名を「test.js」とすればIDEが自動的にJestのテストファイルとして認識するはずだ。

テストのファイル名はテストの対象となるファイルの名前を基に命名する。テストしたいサービスの名前が「calc.js」であるならば、テストファイルの名前は「calc.test.js」となる。

ここではcalc.jsにはaddNumbersというシンプルな関数を用意している。

function addNumbers(a, b) {
    return a + b;
}
module.exports = addNumbers;

テストの書き方

では、テストを記述していこう。

テストブロック

Jestのテストはtest関数を使用して記述する。ひとつ目の引数がテスト名となり、2つ目の引数としてテストの関数を定義する。

const addNumbers = require('./calc');

test('One plus two should be 3', () => {
    expect(addNumbers(1, 2)).toBe(3);
});

正誤の判定

テスト結果の正誤の判定はexcept関数とMatcherを使っておこなう。

Mactherには様々な種類があり、以下のものがよく使われる。