AppBrewフロントエンド学院単体テスト編

2024/6/10 5:322024/6/10 5:32

概要

コードの質や挙動を担保する上で単体テストは最も導入がしやすく一定の効果がある。

今回はReactで構築されたシンプルなアプリケーションを例に以下をハンズオン形式でやっていきます。

コンポーネントの単体テストの書き方

custom hooksを用いた際のテストの書き方

Vitestは速いのか Jestと比較を行ってみる

Vitestを使えば(Viteを使っていると)一つの設定ファイルでテストまでサポートできる CI/CDでの実行は、swc/jestに比べると遅くなる可能性があり手元でのwatchの実行に関しては最速 Vitestについて説明する前にまず、Viteについて説明します。概要 Vite はここ2年ほどで登場したビルドツールです。 vから始まるのでもしや、という方もいると思いますが、Vue.jsの開発者Evan You氏などによって開発されています。 Vueを作った人が作ってるんだからVueじゃないとダメなんじゃないの？と思われるかもしれませんが、特定のフレームワークやライブラリをサポートしているわけではなく、などでも利用可能です。(Svelteに関しては公式のtemplateで使われてました) Viteの利点ここでViteの利点を説明するためにwebpackと対比させます。(webpackを否定するつもりはないのでご容赦ください) 昨今のフロントエンド開発では、ES6やTypeScriptを一旦トランスパイルし、それをbundle化して一つのjsファイルにしていました。この場合以下のような問題点があります。初回のリクエストまでに時間がかかる(ビルドをしないといけないため) 更新の際にビルドして再度bundle化が必要では、Viteはどのようなスタンスでこれらの問題を解決しようとしているかというと、 Native ESM (ES Module) です。今まで、ES Moduleはブラウザで使うことができず、 import などの依存の解決をビルド時に行い、bundle化しなければいけませんでした。しかし、ブラウザがES Moduleをサポートしたことで以下のことが可能となります。 bundle化をせずとも依存問題を解決できる必要になるまでモジュールの読み込みや評価をしないこれによりBundle化などの余計なオーバーヘッドを減らし高速化を図っています。 Viteの説明をしたところでVitestの説明をしていきます。 Vitest は、Viteでお馴染みのAnthony Fu氏らによって作られたテストフレームワークです。名前からもわかる通り、Viteを活用したものとなっており、以下のような特徴があります。 ViteのConfigをそのまま活用できる transformにViteのDev Serverを活用している Jestとほぼ同じようなAPIを提供している ViteのConfigをそのまま活用できる Vitestは、ViteのConfigを流用でき、一つのパイプラインで開発からビルド、テストが可能となります。今までだとwebpackにjestのconfigに...と複数のconfigを運用する必要がありましたが、その煩わしさから解放されます。 (もちろん、別でconfigを追加することも可能です) transformにViteのDev Serverを活用しているこれにより、前述のVite configができるだけでなく、Viteの持つHMR(Hot Module Replacement)が有効活用できます。 Jestとほぼ同じようなAPIを提供している便利だとはいえ、APIなどが変わってしまうとなかなか移行が大変ですが、VitestはJestとほぼ同じようなAPIで、以降に関しては容易に行えます。 Why Vitest に詳しく書かれています。 GitHub に挙げています。テストに関してはJestとほぼ同じように書けます。 Jestの経験があれば特に書くのに困らない思います。 Viteが速いと知られているので、Vitestも速いのでは、と思い検証してみました。以下のJestの構成でスピードの比較をして見ました。パフォーマンスを評価するにあたって以下のようなパターンを用意しました。コンポーネントの依存関係が浅く、同じ階層に大量のコンポーネントがある場合(Concurrent) 以下のようにコンポーネントが同じ階層に配置されているアプリケーションコンポーネントの依存関係が深い場合 (以下、Serial) 以下のようにコンポーネントが入れ子になっているような構成のアプリケーションなお、基本的に断りのない限り、テストの実行はwatchを行わないsingle runを5回実行した際の平均で比較を行ってます。上記のように swc/jestが一番早く、Vitestは ts-jest の倍近くの時間がかかっているようです。今回のケースの場合、モジュールがそれぞれ独立しており、あまりVite ...

https://jiko21-tech-blog.monster/blog/2022-02-13/vitest-compare-jest

備考

jiko21 • Updated Jul 19, 2022

ここにサンプルのアプリをおいてます(簡単なTodoアプリ)

上記テックブログと同じアプリですがViteやReactを更新+テストコードを意図的に消してます

（下記は同じものをSvelteで作ったやつですが…）

必要なもの

node v16

「あきらめねぇど根性」

あったらうれしいもの

最低限Reactが書ける