イントロダクション
Vue Testing Libraryは、DOM Testing Library上に構築され、Vueコンポーネントを操作するためのAPIを追加しています。 Vueの公式テストライブラリである@vue/test-utils上に構築されています。
要するに、Vue Testing Libraryは3つのことを行います
DOM Testing Libraryのクエリユーティリティとヘルパーを再エクスポートします。- Testing Libraryのガイドラインに抵触する
@vue/test-utilsのメソッドを非表示にします。 - 両方のソースからいくつかのメソッドを調整します。
クイックスタート
Vue2を使用する場合
- npm
- Yarn
npm install --save-dev @testing-library/vue@5
yarn add --dev @testing-library/vue@5
Vue3を使用する場合
- npm
- Yarn
npm install --save-dev @testing-library/vue
yarn add --dev @testing-library/vue
これで、DOM Testing LibraryのすべてのgetBy、getAllBy、queryBy、queryAllByコマンドを使用できます。 クエリの完全なリストはこちらをご覧ください。
DOM用のカスタムJestマッチャーを使用できるように、@testing-library/jest-domをインストールすることもできます。
問題
Vueコンポーネントの保守可能なテストを作成したいと考えています。この目標の一環として、**テストにコンポーネントの実装の詳細が含まれないようにしたい**と考えています。むしろ、テストが意図した通りの信頼性を与えることに集中したいと考えています。
このソリューション
Vue Testing Libraryは、Vueコンポーネントをテストするための非常に軽量なソリューションです。より良いテストプラクティスを促進する方法で、@vue/test-utilsの上に軽量なユーティリティ関数を提供します。
その主要な指導原理は
そのため、レンダリングされたVueコンポーネントのインスタンスを扱うのではなく、**テストは実際のDOMノードを操作します**。
このライブラリが提供するユーティリティは、ユーザーと同じ方法でDOMをクエリすることを容易にします。ラベルテキストで要素を見つけたり、テキストからリンクやボタンを見つけたり、アプリケーションが**アクセシブル**であることをアサートしたりできます。
また、テキストコンテンツとラベルが意味をなさない、または実用的でない要素の「エスケープハッチ」として、data-testidで要素を見つけるための推奨される方法も公開しています。