テストコードの品質改善：`using`宣言・非推奨API置換・バリアント修正

2026年05月01日 06:32 JST tailwindlabs/tailwindcss

https://github.com/tailwindlabs/tailwindcss/pull/19999

Vitestモックの自動クリーンアップ、非推奨の.toThrowError()から.toThrow()への移行、誤ったバリアント名の修正など、複数の小さな品質改善をまとめて適用した。いずれも既存の挙動を変えず、テストコードの正確さと保守性を高める変更である。

背景

テストコードの品質劣化は、誤ったテスト名・誤ったバリアント名・非推奨APIの放置・モックの後処理漏れといった複数の問題として蓄積していた。これらは単体では軽微だが、積み重なるとテストの信頼性を損なう。本PRはそれらを一括して修正している。

とくにモックのクリーンアップ漏れは実害が大きい。vi.spyOn() で取得したスパイオブジェクトが afterEach で明示的に .mockRestore() されない場合、テスト間でモックが残存し、後続のテストに副作用を与える可能性がある。

技術的な変更

Vitestモックへの `using` 宣言適用

JavaScript/TypeScriptの Explicit Resource Management（using 宣言）を活用し、Vitestモックのライフサイクルを自動管理するように変更した。Vitestの vi.fn() および vi.spyOn() の戻り値は Symbol.dispose を実装しており、using で宣言されたスコープを抜けると自動的にモックがリストアされる。

変更前のコードでは、明示的なクリーンアップ処理がない箇所でモックが残存するリスクがあった：

// 変更前
const spy = vi.spyOn(process, 'cwd')
spy.mockReturnValue(dir)

// 変更後
using spy = vi.spyOn(process, 'cwd')
spy.mockReturnValue(dir)

同様の変更が以下のファイルに適用されている：

packages/@tailwindcss-postcss/src/index.test.ts（2箇所）
packages/tailwindcss/src/at-import.test.ts（2箇所）
packages/tailwindcss/src/compat/config.test.ts（1箇所）
packages/tailwindcss/src/compat/plugin-api.test.ts（5箇所）
packages/tailwindcss/src/utilities.test.ts（1箇所）

const / let から using への変更のみで、afterEach での手動 .mockRestore() 呼び出しが不要になる。

`.toThrowError()` から `.toThrow()` への移行

Vitestで非推奨となった .toThrowError() を .toThrow() に統一した。これは純粋なAPI名の変更であり、アサーションの挙動に差異はない。

// 変更前
).rejects.toThrowError(/should be alphanumeric/)

// 変更後
).rejects.toThrow(/should be alphanumeric/)

変更対象は以下のファイルにまたがる：

integrations/postcss/core-as-postcss-plugin.test.ts
integrations/vite/index.test.ts
packages/tailwindcss/src/index.test.ts
packages/tailwindcss/src/utilities.test.ts
packages/tailwindcss/src/compat/plugin-api.test.ts

バリアント名の修正

variants.test.ts で、テスト対象のバリアント名が誤って invalid と記述されていたものを正しい user-invalid に修正した。

// 変更前
expect(await run(['invalid/foo:flex'])).toEqual('')

// 変更後
expect(await run(['user-invalid/foo:flex'])).toEqual('')

user-invalid はCSSの :user-invalid 疑似クラスに対応するバリアントで、invalid とは異なる概念である。誤ったバリアント名でも結果が空文字列（''）になるためテスト自体は通過し得るが、テストが本来検証すべき対象を正しく検証していなかった。

`@import` から `@reference` への修正

index.test.ts 内の 'using \@reference`'という名前のテストで、実際には@importを使用していた誤りを修正し、@reference` を使用するように変更した。

// 変更前
@import 'tailwindcss/preflight';

// 変更後
@reference 'tailwindcss/preflight';

テスト名と実際のテスト内容が一致していなかった問題であり、@reference の挙動を正しく検証するよう修正されている。

テスト名のタイポ修正

index.test.ts で container と誤記されていたテスト名を contain に修正した。

// 変更前
test('@custom-variant must not container special characters', () => {

// 変更後
test('@custom-variant must not contain special characters', () => {

設計判断

Explicit Resource Management の積極的な採用 が本PRの中心的な設計判断である。Symbol.dispose を利用した using 宣言は、モックの後処理を言語機能として保証し、afterEach への依存を減らす。Vitestがすでにこのプロトコルを実装していることを活用した選択であり、将来的なテスト追加においても同パターンを踏襲しやすい。

非推奨APIの整理、テスト名・バリアント名の修正、@reference の正しい使用はいずれも「テストコードがドキュメントとして機能する」という観点での修正である。テストが間違ったことを検証していたり、名前と実装が乖離していたりすると、将来の開発者に誤った情報を伝えるリスクがある。

まとめ

本PRは機能追加を含まない純粋なテストコード品質改善であるが、using 宣言によるモック後処理の自動化はとくに実質的な安全性向上をもたらす。テスト間のモック残存というサイレントな問題を構造的に排除したことで、今後のテスト追加・修正時の信頼性が高まる。

背景