簡介
@testing-library
系列套件可以幫助你以使用者為中心的方式測試 UI 元件。
問題
你想要撰寫可維護的測試,讓你有高度的信心,你的元件可以為使用者正常運作。 作為此目標的一部分,你希望你的測試避免包含實作細節,這樣你的元件的重構(實作上的變更但不影響功能)不會破壞你的測試,進而拖慢你和你的團隊的速度。
解決方案
核心函式庫,DOM 測試函式庫
,是一個輕量級的解決方案,透過查詢和與 DOM 節點互動來測試網頁(無論是使用 JSDOM
/Jest 模擬,還是在瀏覽器中)。 它所提供的主要工具包括以類似使用者在頁面上尋找元素的方式來查詢 DOM 中的節點。 透過這種方式,該函式庫有助於確保你的測試讓你確信,當真實使用者使用你的應用程式時,它將能正常運作。
核心函式庫已進行封裝,為多個框架提供符合人體工學的 API,包括 React、Angular 和 Vue。 還有一個外掛程式可用於在 Cypress 中使用 testing-library 查詢進行端對端測試,以及一個用於 React Native 的實作。
這個函式庫不是什麼
- 測試執行器或框架
- 特定於測試框架
DOM 測試函式庫
可與任何提供 DOM API 的環境搭配使用,例如 Jest、Mocha + JSDOM 或真實的瀏覽器。
您應該避免使用 Testing Library 的地方
Testing Library 鼓勵你避免測試 實作細節,例如你正在測試的元件的內部結構(儘管仍然有可能)。 這個函式庫的 指導原則 強調專注於類似使用者與網頁互動方式的測試。
您可能想避免以下實作細節
- 元件的內部狀態
- 元件的內部方法
- 元件的生命週期方法
- 子元件