理想のフロントエンドテストをたずねて三千里 - カミナシ エンジニアブログ

こんにちは。カミナシにて業務委託としてフロントエンドを担当している田村(@junkboy0315)です。皆さんはフロントエンドのテスト、どのように取り組んでいますか？フロントのテストはなかなか難しいですよね。 バックエンドのテストには、「入力、出力、永続化されたデータ」の3つを検証するという基本セオリーがあります。しかし、フロントエンドのテストは、その粒度や手法が多様で、とっつきにくいと感じる方も多いのではないでしょうか。 カミナシでもフロントエンドのテストは以前は十分とは言えない状態でしたが、これまで継続的に改善を重ねてきました。今回は、その変遷についてお話ししようと思います。 夜明け前 カミナシのコードベースでは、元々ユニットテストがある程度整備されていました。これらは主に複雑な計算処理を行い結果を返す関数などに対して実施されていました。 しかし、画面全体の機能を網羅する包括的なテスト

[Samuraijap]

業務委託で働いてるエンジニアが企業ブログ書くのか...

[mizdra]

テスト対象の DOM Tree が視覚的に見えないとテストコードが書きづらいのなるほどなー。playwright の UIモード便利そう。

[shingo-sasaki-0529]

わかる。視覚的なデバッグの出来なさ、実感のなさから、JSDOM なり使ったテストがどうしても好きじゃない。安定性やパフォーマンスに多少目を瞑ったとしてもよりユーザーに近い視点になる Storybook や Playwright が好き。

[pwatermark]

ああそうか、Dependabotが出してくるものですら「フロントのテストが通ってるならOKとみなす」と出来るんだ ....バックエンドとの関連とか怖くね？

[akymrk]

“該当のライブラリが使われているページに統合テストがきちんと書いてあれば、CIにパスしている限りはDependabotが作成してくれたPRをそのままマージできます”

[toricls]

この地道だけどとても大事な取り組みの結果、Dependabot が Web フロントエンドのリポジトリに作るプルリクに追いつくという人類未達の地についに到達しました