create-react-appで標準搭載のテストライブラリは？

こんにちは。kaoruです。

create-react-appが便利そうなので使い始めています。

便利なことにテストフレームワークも最初から入っているのです。

けれど「Jest と React Testing Libraryが入っているよ」といわれてもよく分からなかったので概要を調べてみました。

何が最初から入っていて、何を調べていけばテストコードが書けそうかが分かりました。

create-react-appとは

React公式が推奨のツールチェインです。

Reactの学習やSPAに適しているみたいです。

ツールチェインとして以下が含まれています。

全部（）内のnpm scriptでいきなり実行できるのです。

今回はテスト部分を少し調べていきました。

Node上で動くJavaScriptのテストフレームワーク

今は単体テスト(Unit Test)といえばJestといわれる、実質のデファクトスタンダード

以前、Jasmineというテストフレームワークを使ってみましたが、Mockを実装する時に苦労した覚えがあります。

Jestはテストに必要な昨日をAll in Oneで全て搭載しています。

最初から同梱されている、のですがpackage.jsonを見てもjestがありません。

何故でしょう？

実はreact-scriptsの中に入っているのです。

yarn.lockで確認ができますね。

”jest”でファイル内検索するとあれこれ検索されてしまうので、” jest “のように前後に半角スペースを入れるとうまく拾えます。

コンポーネントをテストするためのテストライブラリです。

実際にはTesting Libraryファミリーの一つです。

package.jsonを見ると以下のモジュールが入っています。

基本的にはテストコード書くにはこれだけで十分です。

ちょっと前だとreact-testing-libraryモジュールを使っていたみたいですね。

React Testing Libraryにも当然マッチャーがあるのですが、上記をインスールすることでJestのマッチャーが使えるようになります。

create-react-app初期ではsetupTest.tsファイルが用意されています。

デフォルト設定で読み込むようにされていて、create-react-appを使わずに自分で実装していく場合はpackage.jsonの”jest”:{ “setupFilesAfterEnv”: に設定ファイルを指定するみたいです。

名前のとおりですが、ユーザイベントのテスト実装ができます。

上記３つが最初からcreate-react-appには入っているんですね。

create-react-appには以下のテストライブラリが入っています。

プロジェクト作成時に初期テストが作成されていて、yarn testですぐにテスト実行ができます。

では、また〜。