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
66
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
59
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Rails Girls Zürich Keynote
gr2m
95
14k
RailsConf 2023
tenderlove
30
1.2k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Statistics for Hackers
jakevdp
799
220k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Unsuck your backbone
ammeep
671
58k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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