簡介

Vue Testing Library 建構於 DOM Testing Library 之上，並加入用於處理 Vue 元件的 API。它建構於 @vue/test-utils 之上，這是 Vue 的官方測試函式庫。

• GitHub 上的 Vue Testing Library

簡而言之，Vue Testing Library 做三件事

1. 從 DOM Testing Library 重新匯出查詢工具和輔助程式。
2. 隱藏與 Testing Library 指導原則 衝突的 @vue/test-utils 方法。
3. 調整來自這兩個來源的一些方法。

快速入門

如果使用 Vue2

npm

npm install --save-dev @testing-library/vue@5

Yarn

yarn add --dev @testing-library/vue@5

如果使用 Vue3

npm

npm install --save-dev @testing-library/vue

Yarn

yarn add --dev @testing-library/vue

您現在可以使用 DOM Testing Library 的所有 getBy、getAllBy、queryBy 和 queryAllBy 命令。請參閱此處的完整查詢清單。

您可能也會有興趣安裝 @testing-library/jest-dom，以便使用 用於 DOM 的自訂 Jest 匹配器。

問題所在

您想要為您的 Vue 元件撰寫可維護的測試。作為此目標的一部分，您希望您的測試避免包含您元件的實作細節。您寧願專注於使您的測試能夠給予您它們預期的信心。

這個解決方案

Vue Testing Library 是一個非常輕量的 Vue 元件測試解決方案。它在 @vue/test-utils 之上提供輕量的實用程式函式，以鼓勵更好的測試實務。

它的主要指導原則是

您的測試越像您的軟體使用方式，它們就能給您更多的信心。

因此，您的測試將使用實際的 DOM 節點，而不是處理呈現的 Vue 元件的實例。

此函式庫提供的實用程式有助於以使用者相同的方式查詢 DOM。它們允許您透過標籤文字尋找元素，從文字中尋找連結和按鈕，並確認您的應用程式是可存取的。

它還公開了一種推薦的方式，透過 data-testid 作為元素的「逃生通道」來尋找元素，其中文字內容和標籤沒有意義或不切實際。