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
とうとうJestを導入してみた話
Search
ricky
July 03, 2019
Programming
0
11k
とうとうJestを導入してみた話
React×TypeScript環境にユニットテストツール「Jest」を導入してみた話です
ricky
July 03, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
旅行プランAIエージェント開発の裏側
ippo012
2
930
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2.1k
Namespace and Its Future
tagomoris
6
710
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
180
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
240
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
130
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
540
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Producing Creativity
orderedlist
PRO
347
40k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Code Review Best Practice
trishagee
71
19k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
Transcript
とうとうJestを導入してみた話 React LT会 〜最近学び始めた方から業務でバリバリ使っている方まで〜 1
WHO AM I 2 小澤 力也(おざわ りきや)@rikipedia_uw • 株式会社ウィルゲート •
エンジニア・広報 • 技術:JavaScript(TS)・React(8ヶ月) • React LT会にずっと参加したかった
想定聴者 • React中級者 • React環境にテストを導入したいひと 3
Jestを導入したアプリケーション • 新規開発中のSPA ◦ React+Redux+TypeScript 4
Jestを導入したアプリケーション 5
Jestとは? 6 Jest(ジェスト) • Facebook謹製JavaScriptのユニットテ ストツール • オールインワンなテストフレームワーク ◦ テストランナー
◦ アサーション ◦ テストモック・テストダブル ◦ スナップショットテスト
Jestを導入した背景 • 開発当初は体制や納期の問題でテストに手を出せなかった ◦ シナリオテストやふるまいテストはやってた 7
Jestを導入した背景 • 開発当初は体制や納期の問題でテストに手を出せなかった ◦ シナリオテストやふるまいテストはやってた →落ち着いてきたのでテスト導入に至った 8
テストを導入する目的 • バグの混入を防ぐ・検知する • テスタブルなコードを意識して書ける • 一貫性のあるテスト観点になる • 品質を担保しつつ、テスターは別のテストを実施することができ る
• テストカバレッジにより定量的に品質を測定できる 9
テストを導入する目的 • バグの混入を防ぐ・検知する • テスタブルなコードを意識して書ける • 一貫性のあるテスト観点になる • 品質を担保しつつ、テスターは別のテストを実施することができ る
• テストカバレッジにより定量的に品質を測定できる 10 ↑メリットを活かすためのテストコードを書く
テスト対象 • Function Component ◦ 純粋関数 11
テスト対象 • Function Component ◦ 純粋関数 12 Container Component(Redux接続部)やRedux Storeの
テストは次の機会
テスト手法 • スナップショットテスト ◦ UIが予期せず変更されていないか確かめるテスト手法 13
React×Jestにおけるスナップショットテスト • コンポーネントの出力結果をファイルに保存 • 1回目ならファイル作成 • 2回目以降は前回との差分を見てOKなら通過 14
スナップショットテストの書き方 import React from 'react'; import Link from '../Link.react'; import
renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); }); 15 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing import React from 'react' import Link from '../Link.react' import renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON() expect(tree).toMatchSnapshot() }) component.test.tsx
スナップショットテストの書き方 import React from 'react'; import Link from '../Link.react'; import
renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); }); 16 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing 必要なライブラリなどを import import React from 'react' import Link from '../Link.react' import renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON() expect(tree).toMatchSnapshot() }) component.test.tsx
スナップショットテストの書き方 import React from 'react'; import Link from '../Link.react'; import
renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); }); 17 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing Reactコンポーネントを生成し、 Json形式に変換 import React from 'react' import Link from '../Link.react' import renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON() expect(tree).toMatchSnapshot() }) component.test.tsx
スナップショットテストの書き方 import React from 'react' import Link from '../Link.react' import
renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON() expect(tree).toMatchSnapshot() }) 18 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing 1回目:スナップショットファイル生成 2回目以降:前回のファイルと比較して OKなら通過 component.test.tsx
スナップショットテストファイル exports[`renders correctly 1`] = ` <a className="normal" href="http://www.facebook.com" onMouseEnter={[Function]}
onMouseLeave={[Function]} > Facebook </a> ` 19 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing __snapshots__/component.test.tsx.snap
スナップショットテストファイル exports[`renders correctly 1`] = ` <a className="normal" href="http://www.facebook.com" onMouseEnter={[Function]}
onMouseLeave={[Function]} > Facebook </a> ` 20 Jest公式ページより:https://jestjs.io/docs/ja/snapshot-testing __snapshots__/component.test.tsx.snap 手動での書き換えは怒られる
スナップショットテストを導入してみて • テスタブルなコードを意識するとロジックとUIが自然に分離す る • ロジックの実装に集中できるようになった • 実装が変わったときに差分が出るからバグの検知が楽になっ た 21
スナップショットテストで気をつけたいこと • 期待する出力が明確になってから行う ◦ 間違ったテストになってしまうため • React Hooksも一部対応しているが完璧ではない 22
以上 23
懇親会で話したいこと • webpack周りの設定どうしてる? • Class Componentのこれからについて 24
Follow Me! 25 https://twitter.com/rikipedia_uw