がんばらないフロントエンドのテストを考える (UI-test 編) - hacomono TECH BLOG

こんにちは！開発チームの山中です！ hacomonoでは、ユーザサイト・管理者サイトのそれぞれを、Nuxt.js で開発しております。 私がジョインした時点では、どちらにもテストコードが実装されておらず、 私の最初のミッションは、これらの品質を担保するための仕組みづくりでした。 今回は、表題の通り、弊社でのフロントエンドのテストについて、どのように実施しているか、説明していきます。 情報量が多いので、今後シリーズ化していくと思います TL;DR 3行でまとめ Jestの仮想DOMを使用するテストは大変なのでやらず、関数入出力のテストのみを担保する。 テストケースをStorybookで作る 作ったStorybookを、Chromatic上でUI-Test / ビジュアルリグレッションテストする。 フロントエンドのテストが重い問題 さて、フロントエンドのテストというと、どうやっても以下の問題に