フロントエンド開発のためのテスト入門 の商品レビュー

吉井健文(著者)

2024/04/02

# ナウなフロントエンドのテストの基本が学べる一冊

## 面白かったところ

- reactの方のアプリケーションは、キツめのlintルールやStorybookへのコンポーネント切り出しがしやすかった点

- アサーション関数やモックのテクニックなど、公式ドキュメントとは別の角度で書かれていたのは親切だと思った

- Storybookのplay関数にインタラクションテストを移す際、様々なテクニックが必要で面白かった

## 微妙だったところ

- next.jsのアプリケーションの型解決が難しかった

## 感想

現実問題、テストするかどうかとは別の問題で、テストができるような設計でコードを書ける技術が求められている。

テストは永久に必要かどうかはさておき、書けたほうがエンジニアとして前線に立てる説はかなり濃厚である。そんなフロント何もわからんエンジニアに投げられた一冊としては、申し分ないクオリティかと思う。

JestだろうがVitestだろうが、Storybookのインタラクションテストだろうが、検証・担保したいものの書き方や考え方はそこまで変わらない。

だからこそこの本を踏み台にして、該当のコンポーネントで担保すべき価値を考えながら写経することはとても意味があると振り返る。

ただ、next.jsのアプリケーションの型パズル解決とE2Eのメンテナンスがめんどくさすぎて途中で放棄した。

気が向いたら、フロントの型パズル力もあげたい。

2023/12/18

フロントエンド開発のテストをハンズオン形式で実習できる点がよい。
StorybookはUIデザインを確認できるツールとして認知していたが、UIコンポーネントテスト始めテストにも十分に使用できることを知れたのが良かった。
書籍内ではサンプルコードが抜粋で掲載だったりするので、全容は自分でコードを直接確認する必要がある。

2023/10/29

フロントエンド開発におけるテスト手法についての本。
普段、テストをほぼ書いてない自分には、かなりハードルが高いように感じてしまった…。できる人はここまでやってるのかと驚き。
せめて、E2Eテストやビジュアルリグレッションテストまでやらなくても、ユニットテストぐらいは書けるようになりたいと思う。

なお、著者によるとテストを書いた方が時間は節約できるとのこと。本当、ちゃんとテスト書いておいたほうがうまくいくのだろうなと、一年ぐらい関わってるプロジェクトの現状を見て思う…。

テスト戦略モデルにおける、テスティングトロフィー型という概念は初めて知ったし、その概念には驚いた。テストの中で結合テストの比重を高めるという概念だそう。まあ、フロントエンドだとページ遷移したりAPIでデータとってきたりするから、結合テストが重要ということなのかな。

モックとかスタブとか、便利だけど使いこなすのはなかなか大変そうだなと思った。こういうのって、いまいち動作の仕組みが分かってないのだけど、どういう原理で動いているのだろう。

Testing Libraryというのは、何でタグの指定じゃなくてロールなんだと思った。タグの変更があること自体は、テストとして問題ないということかな。
今時のHTMLは、ロールについても意識しないといけないということなのかもしれない(WAI-ARIAについては、まだまだ分からないことが多い)。

JESTにカバレッジレポートの機能があるのは知らなかった。テストできていない範囲が分かるらしい。これは、便利。
ReactだとUIコンポーネントまで調査してくれるらしいけど、Vue.jsでもUIコンポーネント部分まで見てくれるのだろうか…(何となくできなさそうな気がする)。

ビジュアルリグレッションテストまではしなくても、Storybookを使うのはありかもしれないなぁ。このへんは、もう少し調べてみたい。

E2Eテストについては、大変そうだとしか思えない…。ただ、何かの手順で不具合が起きる場合、E2Eテストで再現するようにするのがいいのだろうなと思った。