Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactテストはじめ
Search
Nofi
January 08, 2025
0
37
Reactテストはじめ
LT登壇資料
2025/1/9 Reactなんでも発表会
https://connpass.com/event/340079/
Nofi
January 08, 2025
Tweet
Share
More Decks by Nofi
See All by Nofi
2024年読んだ本の振り返り📚
nofi
0
49
Featured
See All Featured
A better future with KSS
kneath
238
17k
We Have a Design System, Now What?
morganepeng
51
7.4k
4 Signs Your Business is Dying
shpigford
183
22k
YesSQL, Process and Tooling at Scale
rocio
172
14k
GraphQLとの向き合い方2022年版
quramy
44
14k
Into the Great Unknown - MozCon
thekraken
35
1.7k
Rails Girls Zürich Keynote
gr2m
94
13k
Being A Developer After 40
akosma
89
590k
Building Applications with DynamoDB
mza
93
6.3k
Optimizing for Happiness
mojombo
377
70k
Producing Creativity
orderedlist
PRO
344
40k
Building Your Own Lightsaber
phodgson
104
6.3k
Transcript
Reactテストはじめ Presented by: Nofi
Introduction Nofi (のふぃ) 元エンジニア。 子育てしながらたまにコード書いている。
今回は「Reactテストはじめ」と題して Reactをベースに作られたフレームワークである「Remix」を使ったアプリを作成 テストまでやってみたいなと思い 初めて単体テストの環境を揃えた話 テストといえば、単体テスト、結合テスト、総合テスト 個々の機能の動きをテストしながら、最後はアプリ全体のUIをテストするという流れ 今回はテスト自体が初めてで、何からすればいいか分からず、 そもそもテストツールって何があるの?から
今回悩んだのは次の2つ ①記事がたくさんあって有名どころの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関連のアプリでテストを初めてやってみるなら、この3つを使おう! jsdom Vitest React Testing Library (可読性が欲しいならjest-domも) 「Reactテストはじめ」まとめ
Thank's