toshi-toma blog

主にフロントエンド、作業ログあとは色々なメモ ✍️ 🍅

TDD Boot Camp in 愛媛に行ってきました & Testingについて

TDD Boot Camp in 愛媛に行ってきました

先日(2/15)に愛媛にて開催された「TDD Boot Camp in 愛媛」に行ってきました。

会場はサイボウズ松山オフィスです！

agile459.connpass.com

当日の様子 togetter.com

内容

内容としては、TDDの伝道師、和田卓人さん (@t_wada) によるテスト駆動開発についての講演＋ペアプログラミングによるTDD実習でした。

午前中の講演では、テスト駆動開発と何か。から始まり、ライブコーディングで実際にTDDを実践する様子を見ることができました。

t_wadaさんがどのような思考プロセスで、どんな順番でTDDを実践するのかを見ることができ、とても勉強になりました。

午後は、言語によるペア(自分はJavaScript)を組んでのTDD実習でした。実習の中ではコーディングした後にみんなでコードレビューなども行いました。

インプット(午前中の講演)からアウトプット(ペアで実習)の流れがとてもスムーズで理解が深まりました。

テスト駆動開発

Boot Campに参加することで学んだテスト駆動開発のポイントをざっと書いておきます。

まず何のタスクから取り組むか？

テストが書きやすいという基準＋重要度で考える。

聞いただけだと、あまり実感がわかなかったですが、実習中にこの重要性に気づきました。 TDDの中で出てくるRedからGreenまでのプロセスをいかに早く辿り着くかで、その後のタスクの進めやすさに影響するので、まずはテストが書きやすいか。という軸で考えることが大事だと思います。

まずは一歩一歩

t_wadaさんによるライブコーディングや、考え方などから、コーディングにおいて一歩一歩進む姿が印象的でした。

普段は焦って、どこまで確実に動作していて、どこが問題になりそうなのか。未知の状態で突き進むことが多いですが、まずは正しく失敗することを確認したり、簡単だけど正しく成功させることができることを確認することが重要。

問題を小さく切り分けることが重要。

コードの品質

テストを書いて、テストが落ちてないからOK。で終わらずに、コードの品質について常に考えることが重要。

テストケースを見て、プロダクトコードの振る舞いを過不足なく簡単に理解できるようなテストコードやテストケースの品質。Red-Green-Refactoringのサイクルの中で、Greenにした後にはどこか改善できるポイントはないか考えるなどなど。できることはたくさんありそう。

何より、テストを書いたら目的達成。ではなくコードの品質を高めることを常に意識する。

Testingについて

TDD Boot Campに参加するということで、事前にTestingについて、フロントエンドにおいてのテストについてインプットをしておきました。

ここからは事前にインプットしたTestingについて書いていきます。

事前に見たもの

フロントエンドのテスト

使う可能性のあるテストツール

  • Jest
  • Cypress
  • react-testing-library
  • react-hooks-testing-library
  • Storyshots
  • reg-suit
  • (Enzyme)

テストの種類(Reactでの例)

  • Linting, TypeCheck
    • ESLint, Stylelint, tsc
  • Unit Tests
    • 関数やクラスなどが対象
    • 入力に対して出力が期待するものか
    • ex: Jest, react-testing-library etc
  • Integration Tests
    • 機能が対象
    • 複数のユニットテストでの手順をテストする
    • モックを可能な限り利用しない
    • ex: Jest, react-testing-library etc
  • E2E Tests
    • アプリケーションが対象
    • ブラウザを制御してシナリオがどのように機能するかをテストする
    • 内部構造は無視してブラックボックスのようにチェック
    • ex: Cypress, Selenium
  • Accessibility Testing
    • ex: pa11y
  • Visual Regression Testing
    • ex: backstop, reg-suit

Testing

調べる中でTestingについて気になったポイントを書いていきます。

テストコードの品質

テストコードのクオリティを下げると将来メンテナンスできない大量のコードを持つことになるので、テストコードも品質はプロダクトレベルで書くべき。

Testingの層

テストピラミットやTesting Trophyなど考え方の参考にできる。

ただしUnit TestやIntegration Test、E2Eなど人によってどんなテストを書くかは違うので、保守や実行コストなどを考慮して、3つに分解して、各層ではどんなテストを書くかをチームで議論する。

Integration TestとUnit Test

E2E、IntegrationとUnit Testで、どのテストを書くのか迷ったときに、1つ参考にできそうだったのが、内部品質と外部品質の観点。 E2Eは外部品質を担保するし、Unit Testは内部品質を担保してくれる。integrationは中間くらい。それぞれ担保できるものが違うので、何を保証したいか考える。

なのでIntegrationやE2Eでカバーすれば機能的にOKでしょ。と思ってもそれを続けるとコードの内部品質が落ちる。

常にTDDでやるのか

もちろん向き不向きがある。例えばフロントエンドだと期待する結果がわからなかったり、まずは作ってみないとわからないものもある。必ずテストファーストではない。プラクティスとして持てると良い。

まずは実装してみて、その日のうちとか、その週までに十分な観点を入れたテストを追加するでも良いし、フロントエンドはある程度はE2EやIntegrationでカバーして、複雑そうな部分だけUnitテスト書くでも良さそう。

最後に

今回のTDD Boot Campはt_wadaさんにTestingやテスト駆動開発についてその場で聞いて、インプット→アウトプットをすることで理解を深めることができる最高の場でした。

思考や取り組み方など今後のエンジニアリングで参考にできそうものが多かったです。

主催のAgile459さん、そしてt_wadaさん、参加された皆様ありがとうございました！