フロントエンドテスト入門
from Kyoto.js 17
フロントエンドテスト入門
コードの話はしません
テスト全般の話
手動テスト
人が使いやすいか
プラットフォームをまたいだテスト
webサイト→ネイティブアプリケーション とか
自動テスト
いろいろある
フロントエンドの自動テスト
E2Eテスト
手動テストと同じような感じ
バックエンドも含めたサービス全体のテスト
スナップショットテスト
UIの変更を検知するようなテスト
ユニットテスト
関数・コンポーネントごとテスト
The front-end test pyramid
フロントエンドにおいてどういったバランスでテストをやっていったらよいか
E2E 10%
スナップショット 30%
ユニットテスト 60%
メリット・デメリット
E2E
pros
ユーザ動作にいちばん近い
ブラウザ依存を検知
cons
保守コスト
実行時間
スナップショット
pros
どのようにレンダリングされているかを担保
cons
classやidを変更するだけで落ちる
ユニットテスト
pros
テストが仕様になる
責務の分離
cons
書き方を間違えると通るテストが書けてしまう
自動テストを導入するまえに考えること
新規案件でなく後からテストを導入しようというとき
本当に自動テスト必要ですか
新たにコードを書く
テストない時に比べてリリースに時間かかる
メンテナンスが必要
手動テストのほうが早い場合もある
カオスな状態でテスト導入してもあまり意味がない
コンポーネント同士が密結合
コストかかるのでちゃんと考えたほうがいい
責務の分離
自動テストの手段
E2Eテスト
スナップショット
Jest
他にありますか
ユニットテスト
The State of JavaScript 2019
Jest
ユニットテストからはじめよう
最後に
フロントエンドテストは他にもいろいろある
テストやることでリファクタリングしやすくなる