JestによるCSSユニットテスト

CSSのユニットテストでは、計算済みスタイル、クラスの適用、レイアウトの動作をプログラムで検証します。ブラウザのスクリーンショットや手動による目視確認を必要とせず、CSSロジックのリグレッション（誤ったクラスの適用やモディファイアの欠落など）を検出できます。

JestはデフォルトでJSDOMを使用しますが、CSSのサポートは限定的です。レイアウトの計算や複雑なセレクターの評価は行いません。基本的なクラスの存在確認やインラインスタイルのテストにはJSDOMで十分ですが、計算済みプロパティをテストする場合は、CSSモジュールのモックとともにjest-environment-jsdomを使用してください。

コンポーネントをレンダリングし、propsまたはstateに基づいて正しいCSSクラスが適用されていることをアサートします。これにより、具体的なスタイル値をアサートしなくても、条件付きクラスのロジック（active、disabled、error variant）が正しく機能することを検証できます。

Jestはidentity-obj-proxyを使ってCSS Moduleのインポートを変換します。このプロキシは、アクセスされたプロパティに対してクラス名の文字列を返します。styles.primaryは"primary"を返します。実際のCSSを適用しなくても、テストでクラス名をアサートできます。

Styled Componentsのプロジェクトでは、jest-styled-componentsによってtoHaveStyleRuleマッチャーが追加されます。実際のブラウザでスタイルを計算しなくても、propsに基づいてstyled componentが正しいCSSプロパティ値を適用することをテストできます。

jest-domは、DOM固有のマッチャーでJestを拡張します。toHaveStyle（インラインまたは計算済みのスタイルを確認）、toHaveClass（クラスリストを確認）、toBeVisible（display、visibility、opacityを確認）などがあります。これらにより、CSSのアサーションを読みやすく、表現力豊かに記述できます。

コンポーネントのスナップショットには、クラス名を含むレンダリング済みマークアップが記録されます。CSS Moduleの名前変更や条件付きクラスのロジック変更は、スナップショットの差分として現れます。意図しないクラス変更をすばやく検出するのに便利ですが、スナップショットを慎重にレビューする習慣が必要です。

Jestでは、レイアウトの計算（offsetWidth、getBoundingClientRect）、メディアクエリの評価、CSSアニメーションの実行はできません。これらにはPlaywrightやCypressによる実際のブラウザ環境が必要です。JestのCSSテストは、ブラウザベースのテストを置き換えるものではなく、補完するものです。

テストでコンテナ要素にCSSカスタムプロパティを設定します。element.style.setProperty("--color-primary", "red")。getComputedStyle(el).getPropertyValue("--color-primary")で計算済みの値を読み取ります。JSDOMはカスタムプロパティの読み取りをサポートしていますが、カスケードには対応していません。

アニメーションを開始するクラスが適切なタイミングで追加・削除されることを検証します。モーダルコンポーネントを開いたときにanimate-enterクラスが追加され、アンマウント前にanimate-exitクラスが追加されることをテストします。アニメーションのCSS自体はVRTでテストします。

CSSロジックはJavaScriptに存在します。たとえば、条件付きクラス文字列、テーマプロバイダーの値、スタイルオブジェクトの生成などです。Jestのカバレッジ（Istanbul）で、このJavaScriptによるCSSロジックをカバーできます。すべての分岐をカバーするテストを作成し、すべてのバリエーションと状態の組み合わせを実行してください。

JestでCSS Modulesとともに使用した場合、identity-obj-proxyは何をしますか。

JestによるCSSユニットテストでは、実際のブラウザを使わずに、クラス適用のロジック、条件付きスタイル、CSS Moduleの動作を検証できます。CSS Modulesにはidentity-obj-proxy、Styled Componentsにはjest-styled-components、読みやすいアサーションにはjest-domのマッチャーを使用してください。VRTと組み合わせることで、CSSの品質を包括的にカバーできます。