きままに記録箱

フロントエンドたまに他のはなし

「フロントエンド開発のためのテスト入門」感想

とりあえず1周してサンプルコードも一通りいじったので感想をば。

www.shoeisha.co.jp

TL;DR

フロントエンド開発の自動テスト整備に悩んでいる人は絶対読め。 比較的作りやすいメソッドとかstoreのテストしか作ったことない人も読め。 Storybook放置しそう問題も取り除いてくれる。

ただしハンズオン本ではないことには注意。

読み方

よくあるハンズオン本ではありません。サンプルコードをダウンロードして動かして試すタイプの本です。

なので本に書かれていることやサンプルコードを見つつ、実際に業務などでアウトプットしていかないと身につかないかなぁと。 すでにJestを使っているならこんな書き方もあったんだ!みたいな目で見ると読むのが楽しいです。

ちなみにサンプルコードは私のM1 Macbookでも動作出来たので、Apple Slicon勢も安心してください。

良かったところ

Jestのモックにページを割いてくれている

jest.mock/jest.spyonの使い分けについてここまで理解しやすかったのは多分初めてです。 最初にモジュール全体をjest.mockしてしまう→jest.spyonで発火イベントを確認の手法は今後も真似していきたい。

Storybookを放置させないための取り組みが乗っている

Storybookを放置・断念してしまう話を過去何度か聞いたことがあったので、ずっと懸念していたトピックだったのですが、 「既存のJestで作ったコンポーネントテストと一緒に動かしてしまう」はまさに目に鱗でした。 読み終えた後ちょっと調べてみたんですが、手法自体2年くらい前からもうあったんですね。。。

公式でも触れられている。

storybook.js.org

ライブラリ固有の話をあまり持ち出してない

文中にもある通り、他のフレームワーク・ライブラリでも考え方が流用できるようにという意図もあり、Next.js・Prisma・Playwrightに関しての説明は最小限に留められています。 まずはモダンフロントエンドの実践的なテストテクニックの共有を伝えきってしまいたいという筆者の意気込みが伺えます。

気になったところ

個人的にはほぼ文句なしの内容でしたが、読む前に注意したほうが良さそうな点もあったのであげます。

ライブラリの設定の説明は少ない。

サンプルコードで記載の設定ファイルについての紹介は文中では出てきません。 公式サイトを当たる必要があるので、丸々日本語で知りたい人は少々注意が必要です。

tsx記法に慣れてない人は厳しい

Next.jsをお題にしている以上仕方ないかもしれないが、コンポーネントの記法が異なるVueとかAngularしかやっていない人には少々つらいかも。 知らない人は別記事で記法を見ておいたほうがいいかと。

ビジュアルリグレッションテストがreg-suit推しなのが気になる

reg-suit自体はいいサービス・ライブラリだと思うのですが、日本国外のユーザーがいるのを見たことない上、最終更新が半年前で止まっており個人的には躊躇ってしまいます。あと自前で色々ストレージを設定しないといけなかったりするのもマンパワーがないと辛い、、、

いまはStorybookの会社が出しているChromaticもあるので、こっちのほうが良いかなと思ったりします。しばらく運営は大丈夫だと思いますし、ホスティングするだけで面倒な設定を代わりにやってくれるので。 これもこれでやや金額は高いですが、個人だと(よっぽどテストを回さない限り)無料で使えます。

www.chromatic.com

Chromaticについては、WEB+DB PRESS Vol.134の「はじめての画像回帰テスト」特集で実例を交えて紹介されているので興味ある人は是非是非。 これも非常に面白い記事でした。

gihyo.jp

余談

いくつかストックが溜まっているので、放置しぱなしのZennの方にも近日少しずつ記事を投稿していこうと思っています。ずっと目標の一つにしてきたbookも書きたいですねー。

モダンフロントエンド関連の書籍の発売が(良い意味で)最近相次ぎすぎや。