Frontでもテスト書くべきでね？

@masaakikunsan

すまねぇみんな...

今回過去最高に雑です...

誰？

・石岡将明 (@masaakikusan)

・株式会社SCOUTER

・back check 開発責任者/フロントエンジニア

・自称フロントエンド界隈1の加藤恵のオタク

・GWに北海道で女友達とオフ会をして酔いすぎて捻挫した

宣伝

ZOCってアイドルが良い

family nameを聞け！

冴えない彼女の育てかた fine 2019年秋上映

いきなりですが、質問です！

サーバーサイドではテストコードを書きますか？

フロントエンドではテストコードを書きますか？

フロントエンドでのテストは必要だと思いますか？

これまでのテストについて

・テストはサーバーサイドのみ書けば良い

これまでのテストについて

・テストはサーバーサイドのみ書けば良い

・フロントのテストはUIと密に絡むことが多く、dom操作が
だるかったりまぁだるい

これまでのテストについて

・テストはサーバーサイドのみ書けば良い

・フロントのテストはUIと密に絡むことが多く、dom操作が
だるかったりまぁだるい

・フロントは目で見て確認できるからテスト書かなくてええやろ

etc...

フロントでのテスト否定派にまぁ色々言われてきた

昔の俺もまぁテストいらんやろって思ってた

フロントでもテストを書く理由

・アプリケーションの複雑化に伴い、昔よりフロントにも求められることが増えている

・JSの複雑化？によりしんどさが増してきている

・プロダクトによってはテストケースが莫大に増えリリースのたびに手動で確認するにはあまりにもゴミ of the ゴミ

・綺麗なコードを書くためのテストコード

これからはフロントもテストを書く時代！

ちなみに

テストを書かないときにある事故

・AのロジックをいじったらBが死んだ

・テスト漏れがあって死んでいた

・なんで動いてるかわからんコードを触ったらなんか死んだ

俺も昔決済機能一日ぶっ壊した経験がある

自分を守るためにもテストを書く

オレを守れるのはオレだけだ

フロントでのテスト

Unit Test

とりまJestぶち込んでテスト書けば良い

E2E Test

個人的にテストで求めてるのはE2Eテスト

個人的E2Eテストの二台巨塔

・Puppeteer

・TestCafe

Puppeteer

・Headless Chrome を Node でよいしょできる

・わりと簡単にChrome環境でのテストができる

・起動すると鬱病になったChromeのアイコンが見れる

TestCafe

・いろんなブラウザでの動作が見れるよ

・あとはブログに前ざっと書いたので読んでほしい

なんとなく言いたいことはわかったけど、
テストいれる余裕も時間もないよ〜って人！

正直俺も今のプロダクトでテスト書いてない

でもまぁできるところから、優先順位高いところからテスト書いて
テスト書ける環境作っていくのが大事

まとめ

・フロントももうテスト書いていこうよ

・UnitもE2Eも比較的に楽に導入しやすくなってきたよ

・テストを全部書くのは無理だから重要なところから

・自分もプロダクトも守るためのテストだよ