Vitest実行したら TypeError: CSS.supports is not a function が表示されたときの話

こんにちは、合同会社Stegの@keigoです。今回は、Vuetifyを導入しているNuxt3プロジェクトにて、TypeError: CSS.supports is not a functionが表示された時の話を書きます。

この記事は、解決策兼日記のようなものです。

表示されたエラー

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: CSS.supports is not a function
 ❯ node_modules/vuetify/lib/util/globals.mjs:7:80
      3| export const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.nav…
      4| export const SUPPORTS_FOCUS_VISIBLE = IN_BROWSER && typeof CSS !== 'undefined' && C…
      5| //# sourceMappingURL=globals.mjs.map
       |                                    ^

これです。自分は nuxt-vitest を使用していたのですが、nuxt-vitest側でコケているのか、Vuetify側でコケているのかがわかりませんでした。

しかしコケている箇所はVuetifyのコードなので、VuetifyのissueやPRを見にいきました。すると、少し似たissueを見つけ、多くの人が盛んにディスカッションしていました。

自分のエラーの場合、CSSは存在するけど、CSS.supportsが存在しないことで発生するエラーだったんですよね

forkして独自パッチ当てようと思った時期が私にもありました

当時は、以下のようなコードになっていました。

export const SUPPORTS_FOCUS_VISIBLE = IN_BROWSER && 
            typeof CSS !== 'undefined' && CSS.supports('selector(:focus-visible)');

ほんなら、CSS.supportsが存在するかどうかも見ればいいんでね？と思い、以下のようなコードで実験してみたところ、正常に動くようになりました。

export const SUPPORTS_FOCUS_VISIBLE = IN_BROWSER &&
              typeof CSS !== 'undefined' &&
              typeof CSS.supports !== 'undefined' &&
              CSS.supports('selector(:focus-visible)');

よし、このような変更を加えるためにforkすっか〜と思い、Vuetifyをforkしcloneして該当ファイルを開いたところ、↑とまったく同じコードが書かれていましたw

コミットログを見てみると、この出来事が起きた時から2ヶ月前にコミットが積まれていました。 Vuetifyをinstallしたのが2ヶ月以上前だったので、Vuetifyをupdateすれば直るやんけ！！！！ということに気づきました。

変更されたPR：https://github.com/vuetifyjs/vuetify/pull/16984

結論

自分のプロジェクトに導入しているVuetifyをアプデしましょう。