テスト出力のノイズを排除：`console.warn` の抑制と `src/` ファイルへの切り替え

テスト実行時に漏れ出ていた console.warn メッセージを抑制し、@tailwindcss/node の参照先を dist/ から src/ に切り替えることで、テスト出力をクリーンアップしました。

背景

テスト実行時に不要な警告メッセージが標準出力に混入し、テスト結果の視認性を低下させていました。問題は2つの独立した原因から発生していました。1つは特定のテストケースで意図的にトリガーされる console.warn が抑制されずそのまま出力されていたこと、もう1つは @tailwindcss/node のビルド済み dist/ ファイルを参照することで生じるソースマップ関連の警告です。

PR添付のスクリーンショットが示す通り、修正前は大量の警告メッセージがテスト結果に混入していましたが、修正後は最小限の出力に整理されています。

技術的な変更

今回の変更は「警告の抑制」と「参照ファイルの切り替え」の2本立てで構成されています。

console.warn の明示的なモック化

console.warn を発することが期待される2つのテストに、vi.spyOn によるモックが追加されました。packages/@tailwindcss-postcss/src/index.test.ts では、result.opts.from が未指定の際の fallback 動作テストに using _ = vi.spyOn(console, 'warn').mockImplementation(() => {}) が1行追加され、警告が出力されないよう抑制されています。

packages/tailwindcss/src/utilities.test.ts では、サポートされていないベア値のデータ型（color など）を @utility で使用した際の警告テストに同様のスパイが導入されました。こちらはさらに踏み込んで、spy.mock.calls を介して実際に出力された警告メッセージの内容を toMatchInlineSnapshot で検証する形に強化されています。

using spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
// ...
expect(
  `\n${spy.mock.calls
    .map((c) => c.join(' '))
    .join('\n')
    .trim()}\n`,
).toMatchInlineSnapshot(`
  "
  Unsupported bare value data type: \"color\".
  Only valid data types are: \"number\", \"integer\", \"ratio\", \"percentage\".
  ...
  "
`)

using キーワードによる Explicit Resource Management が活用されており、テストスコープを抜けると自動的にスパイが解除される設計になっています。

@tailwindcss/node の exports を src/ ファイルへ切り替え

packages/@tailwindcss-node/package.json の exports フィールドが、dist/ 配下のビルド済みファイルから src/ 配下のソースファイルを直接参照するよう変更されました。

変更前:

"exports": {
  ".": {
    "types": "./dist/index.d.ts",
    "import": "./dist/index.mjs",
    "require": "./dist/index.js"
  },
  "./require-cache": {
    "types": "./dist/require-cache.d.ts",
    "default": "./dist/require-cache.js"
  },
  "./esm-cache-loader": {
    "types": "./dist/esm-cache.loader.d.mts",
    "default": "./dist/esm-cache.loader.mjs"
  }
}

変更後:

"exports": {
  ".": {
    "types": "./src/index.ts",
    "import": "./src/index.ts",
    "require": "./src/index.cts"
  },
  "./require-cache": {
    "types": "./src/require-cache.ts",
    "import": "./src/require-cache.ts",
    "require": "./src/require-cache.cts"
  },
  "./esm-cache-loader": {
    "types": "./src/esm-cache.loader.mts",
    "default": "./src/esm-cache.loader.mts"
  }
}

あわせて、publishConfig にこれまでの dist/ ベースの exports 定義が移動しており、npm publish 時には従来通りビルド済みファイルが配布されます。また、./require-cache エントリで参照される src/require-cache.ts は今回新規追加されたファイルで、require.cache からエントリを削除する clearRequireCache 関数が定義されています。

設計判断

開発時とパブリッシュ時で exports を切り替える 方式が採用されました。exports フィールドをソースファイル向けに書き換え、publishConfig.exports にビルド済みファイル向けの定義を置くことで、npm publish 実行時には publishConfig の内容が exports を上書きします。これにより、開発・テスト時は @tailwindcss/node をビルドし直さずにソース変更が即座に反映され、リリース時は従来通りのコンパイル済みファイルが配布されるという二重構造が実現されています。

テスト側での vi.spyOn の採用は、警告を単に黙らせるだけでなく、インラインスナップショットによる内容検証も同時に行える点で合理的です。警告の出力を抑制しつつその内容を保証するという、テスト品質と出力クリーン性を両立するアプローチといえます。

まとめ

本PRは、テストの信頼性を損なわずに出力ノイズを除去するための実践的な変更です。publishConfig による exports の分離とスパイを使った警告検証の組み合わせは、モノレポにおける開発体験改善の好例として参考になります。