LitのコンポーネントテストはVitestで決まりかもしれない
結論:コンポーネントテストはVitestが最適解(かもしれない)
Vitestが良い。 イメージとしてはVite + Jest。テストはJestライクに書けて、コンポーネントテストもできるようになった感じ。
VitestだとLitのコンポーネントテストがここまで簡単に書けてしまう。 StackBlitzでオンライン実行する
ただ、まだv1にも達していないので今後の動向を注視していきたい。
結論にいたるまで:Litのテスト方法の調査変遷
Web Test Runnerを調べる
最近プロダクトでLitを使っていて、コンポーネントテストをどうやってやるかに悩んでいた。
まず、Litが推している、Web Test Runnerを試した。
試しているうちに、どうにも@customElement
がうまく処理できないことが判明。
Web Test RunnerのExampleリポジトリを見ると、わざわざ別ファイルからwindow.customElements.define
を呼び出しているので、何かしらの問題を抱えているように見える。
@customElement
を多様しているプロダクトだったので、これはかなり致命的だった。
次に、LitのStarter Kitリポジトリのテストを参考にしてみた。
Web Test Runnerでテストするための設定項目が多すぎて途中で挫折。
そんなこんなで、Web Test Runnerは見送った。
Jestを調べる
Web Test Runnerを諦めたあとは、Jestで実現できないか調べた。
TypeScriptで書いているのでts-jestを使うのはもちろんだけど、babel-jestまで導入しないといけなかった。
(GitHubでのIssueを参照)
しかもこの方法を取ったけれども、結局Shadow DOMがちゃんとレンダリングされなくて詰むという状態になって心が折れた。
コンポーネントテストが導入されたCypress,Playwrightを調べる
最近、E2Eテストフレームワークがコンポーネントテストをサポートするようになってきた。
CypressとPlaywrightがサポートし始めている。どちらもまだPreview版な状態。
これでLit(Web Components)もできるかと思ったけれど、現在サポートしているのはReact/Vueなどの有名所のみ。
Litはもう少し待つ必要がありそうだとわかったところで調査終了。
Vitestに出会う
Viteを調べているときにVitestを見つけた。
Examplesを眺めていると、なんとLitがある!
コードを見ると、vite.config.ts
を設定するだけのシンプルさ。
アサーションやモックもJestライクに書けるから、すでにJestを導入しているプロダクトでも学習コストが低い。
ということで、Vitestを導入することに決めた。