跳至主要內容

Angular 測試庫

Angular Testing Library 建構於 DOM Testing Library 之上，加入了用於操作 Angular 元件的 API。從 ATL 版本 17 開始，您還需要安裝 @testing-library/dom

npm install --save-dev @testing-library/angular @testing-library/dom

或者，您可以使用 ng add 命令。這會設定您的專案以使用 Angular 測試庫，其中也包含 @testing-library/dom 的安裝。

ng add @testing-library/angular

問題​

您想要為您的 Angular 元件撰寫可維護的測試。作為此目標的一部分，您希望您的測試避免包含元件的實作細節，而是專注於讓您的測試給予您預期的信心。作為其中一部分，您希望您的測試基礎能夠長期維護，以便重構您的元件（變更實作而非功能）不會破壞您的測試並拖慢您和您的團隊的速度。

此解決方案​

Angular Testing Library 是一個非常輕量的 Angular 元件測試解決方案。它在 DOM Testing Library 之上提供輕量的實用函數，以鼓勵更好的測試實踐。它的主要指導原則是：

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

因此，您的測試將使用實際的 DOM 節點，而不是處理已渲染的 Angular 元件實例。此程式庫提供的工具可以讓您以使用者相同的方式查詢 DOM。透過標籤文字尋找表單元素（就像使用者一樣），透過文字尋找連結和按鈕（就像使用者一樣）。它還提供了一種建議的方式，可以透過 data-testid 尋找元素，作為文字內容和標籤沒有意義或不實際的元素的「逃生出口」。

這個程式庫鼓勵您的應用程式更易於存取，並讓您的測試更接近使用者使用您元件的方式，這讓您的測試更有信心，您的應用程式在真實使用者使用時能夠正常運作。

Angular Testing Library

  • 重新匯出 DOM Testing Library 的 query 和 fireEvent 實用函數。
  • 封裝您元件的 fireEvent 函數，以便在事件發生後自動呼叫 detectChanges()
  • 與測試框架無關，它可以在每個測試框架上執行