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
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
180
Building a Smaller App Binary
kateinoigakukun
2
220
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
15
2.9k
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
8k
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
LPIXEL×CADDi_kaerururu
kaerururu
3
300
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
1.5k
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
5
1.1k
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.5k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
28
12k
Done Done
chrislema
178
15k
4 Signs Your Business is Dying
shpigford
174
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Gamification - CAS2011
davidbonilla
76
4.5k
Ruby is Unlike a Banana
tanoku
95
10k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
The Mythical Team-Month
searls
214
42k
A Philosophy of Restraint
colly
195
15k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
What's new in Ruby 2.0
geeforr
335
31k
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