前提
Frontendの開発でvitestやjestをjsdom環境で動かしている
発生した問題
vitestを動かしたときに、テスト対象のファイル以外であっても、読み込むファイルの中に
<div className="has-[focus-visible]:outline">
のようなhasセレクタ（tailwindで失礼）使っている場合、
SyntaxError: missing ) after argument list
というエラーが出力されてテストがエラーになる。
理由
jsdomが内部的に使っているCSSセレクタエンジン（ブラウザのquerySelectorを模倣したようなもの。CSSからDOM要素を取得するのに使う）のnwsapiがhasセレクタに対応していないから。
歴史
- CSSセレクタエンジンをdom-selectorに変更する。https://github.com/jsdom/jsdom/pull/3644
- dom-selectorにパフォーマンスの問題があったようで、nwsapiに戻す。https://github.com/jsdom/jsdom/issues/3659
- 上記2つが2024年1月の出来事
つまり
jsdomがdom-selectorを使っていたバージョン23.2.0ではhasセレクタが使えます。
しかしissueの通りパフォーマンスに影響があって、特にgetByRoleが遅くなってしまいました。（自分のProjectで言うと、テスト全体の実行時間が10秒から30秒になっていた。）
どうすればいいか
- happydomを使う -> jsdomの競合他社のようなやつです
- hasなしで実装しつつ、jsdomもCSSセレクタエンジンの変更やアップデートは定期的に行っているようなので、常に最新版を試して望みのCSSが使えるよういなっているか確認する
- browser modeを使う https://vitest.dev/guide/browser/ ただしbrowser modeではMockに制約があったりするので、結局jsdomなどのブラウザエミュレーションと併用すると思う