Reactテストはじめ Presented by: Nofi 

Introduction Nofi （のふぃ） 元エンジニア。 子育てしながらたまにコード書いている。 

今回は「Reactテストはじめ」と題して Reactをベースに作られたフレームワークである「Remix」を使ったアプリを作成 テストまでやってみたいなと思い 初めて単体テストの環境を揃えた話 テストといえば、単体テスト、結合テスト、総合テスト 個々の機能の動きをテストしながら、最後はアプリ全体のUIをテストするという流れ 今回はテスト自体が初めてで、何からすればいいか分からず、 そもそもテストツールって何があるの？から 

今回悩んだのは次の２つ ①記事がたくさんあって有名どころのJest。 Jestは、Node.jsを基盤にしており、どんなJavaScriptプロジェクト にも適用可能で広く使われているテストフレームワーク。 ②Vite関連でよく聞くVitest Vitestは、JavaScript/TypeScript向けのテストフレームワークで、 軽量で高速なテスト実行がいいところ。 Viteとの統合を意識して設計されており、Viteを使ったプロジェクト で特に効率的に動作する。 Vitest Jest 

こちらは、npm trends(npmでのinstall数を可視化しているサイト)で JestとVitestの過去2年間のinstall数を比較したもの Jestの根強い人気もさることながらvitestも右肩上がり 

今回はすでに使用していたRemixがViteを使ったフレームワークなので相性良さそう、 ということでVitestを選択。 インストールやチュートリアルを行い、ボタンコンポーネントのテストコードを書いて動かしてみる。 ここで、Vitest以外のツールが必要だと気づく。 Vitest 

Reactアプリのテストのためには3つのツールが最低限必要。 テストランナーであるVitestでテストの記述。 jsdomでdomを生成しブラウザを仮想で作る。 VitestやTesting Libraryがこれを利用してDOMを操作・検証する。 jsdom Testing Library Vitest (Testing framework) 

jsdomとTesting Libraryをinstallする。 Testing Libraryはいろんなフレームワーク に対応しているので、 「react testing library」を探してinstall 

改めてボタンコンポーネントのテストを行う。 

対象のボタンコンポーネントに 書かれているテキストが 「追加」の時、グリーン 

「追加」でない時、レッドが出る。 

toHaveTextContent()のために@testing-library/jest-domもinstallした。 jest-domにはこんな感じで便利なカスタムマッチャーがある。 　expect(screen.getByRole("button").textContent).toBe("追加"); 　　↓ 　expect(screen.getByRole("button")).toHaveTextContent("追加"); DOMに対するアサーション（DOM要素の状態やプロパティを確認する操作）を自然言語 に近い形で記述できるためテストコードの可読性が向上する。 

jest-dom適用手順 ③Vitestの設定ファイルにsetupFailesとして 先ほどのファイルをパスを指定したら使える。 　①@testing-library/jest-domをinstallする。 　②setUpTests.tsを作成してVitest用のjest-domをimportする。 

これで単体テストの環境構築完了！ 

React関連のアプリでテストを初めてやってみるなら、この３つを使おう！ jsdom Vitest React Testing Library （可読性が欲しいならjest-domも） 「Reactテストはじめ」まとめ 

Thank's