Angular 模板程式碼覆蓋率和麵向未來的測試所缺少的要素

TL;DR: 為Angular 測試啟用提前(AOT) 編譯，以獲得準確的模板程式碼覆蓋率、更快的測試執行速度、生產對稱性和麵向未來的能力測試。

此選項已可供 Vitest 使用者使用，很快就會可供 Karma 和 Jest（實驗建構器）使用者使用。

？ JIT 出了什麼問題？

無論您使用 Karma、Jest 還是 Vitest，您都可能會使用即時 (JIT) 編譯來進行 Angular 測試，因為 直到最近，它還是唯一可用的選項。

問題是 JIT 有一些顯著的缺點：

• 程式碼覆蓋率不準確，因為未考慮範本。
• 它較慢，因為測驗會動態編譯模板。
• 它不是面向未來的，因為 Angular 已經達到了 JIT 相容性的極限。根據設計，某些功能根本不可能透過 JIT 來實現。
• 與使用AOT的生產環境不對稱。

⏰ 為什麼是現在？

自從 Angular 8 和 IVy 的引入以來，Angular 編譯器已經開始將模板轉換為指令。除了許多其他好處之外，這還意味著程式碼覆蓋率工具可以將這些指令對應到模板並相應地計算程式碼覆蓋率。

理論上，從 Angular 8 開始就可以透過使用 AOT 運行測試來產生程式碼覆蓋率，但該選項在 Karma 或 Jest 中不可用。 自從 Analog 團隊加入了 Vitest 對 Angular 的支援後，才可以啟用 AOT 進行測試。

截至 2024 年 11 月：

• Vitest是唯一支援AOT編譯的選項。
• Karma 和 Jest Experimental Builder 有開放的 PR 來支援 AOT。

？ AOT 測試的其他好處

⚡️ 更快的測試執行

無論您使用 JIT 還是 AOT，元件最終都會在某個時刻被編譯。主要區別在於，使用 AOT 時，編譯只需完成一次並可以緩存，而使用 JIT 時，每個測試模組最終可能會重新編譯組件。

這表示即使 AOT 的轉換階段有點慢，整體測試執行時間也會更快。我看到的數字顯示執行速度提高了約 20%，但這在很大程度上取決於測試的結構和被測系統。

？生產對稱性

我們通常希望我們的測試與生產環境盡可能對稱，以增加信心。這通常具有挑戰性，因為它需要與其他屬性（例如測試速度、被測系統的大小或可預測性）進行平衡。

AOT 的有趣之處在於它在不損害其他屬性的情況下提高了生產對稱性。 使用 AOT，您將獲得更多信心並實現更接近生產的行為。

？面向未來的測試

更重要的是，JIT 已經達到了極限，並且正在成為 Angular 的負擔。例如，JIT 根本不支援某些 Angular 功能（例如可延遲視圖）。 Angular 路線圖中的其他潛在功能，例如無選擇器組件，可能無法與 JIT 一起使用。

實際上，自從 Angular 的訊號輸入（以及類似的函數式 API） 以來，JIT 已經需要一些最小的轉換才能運作。

透過切換到 AOT，您可以讓您的測驗面向未來，準備好從任何創新中受益，並為 JIT 的未來做好準備。

？缺點

？應避免動態組件構造

透過開啟 AOT，一些依賴動態構造的技術將會被破壞。

例如，這樣的用法將不再起作用：

但是，繞過AOT編譯仍然是可能的（⚠️暫時️⚠️）:

我的建議是盡可能避免此類構造，並更喜歡在需要時創建特定於測試的組件，即使它可能有點冗長。未來，Angular 團隊可以提供既相容 AOT 又更少樣板的替代方案。

？淺層測試更具挑戰性

雖然淺層測試不應該是您的主要測試策略，因為它的生產對稱性也較差，但它仍然是您工具箱中的有用技術。

使用 AOT，目前無法使用 TestBed#overrideComponent 覆寫元件的匯入。

解決方法是使用測試框架的 API 在模組層級覆蓋組件的依賴項，並用其測試替身替換組件。

例如，使用 Vitest：

雖然這個臨時解決方法與 AOT 相容，但它會產生一定的成本：

• 它的可讀性較差，而且更加冗長。
• 模組層級的「Mocking」（或提供測試替身） 粒度較小，可預測性較差。
• 它與您正在使用的測試框架高度耦合。

目前，我建議使用 JIT 進行淺層測試，直到 TestBed#overrideComponent 支援 AOT 或 Angular 團隊提供更好的替代方案。您可以透過對淺層測試使用單獨的配置來實現此目的，該配置使用 JIT 來進行與 *.jit.spec.ts 等特定模式相符的測試。

??‍？試試 Vitest 與 AOT

1. 設定Vitest

• 對於 Angular CLI 用戶，請使用 Analog 的原理圖。
• 對於 Nx 用戶，在生成應用程式或庫時選擇 vitest 選項（自 Nx 20.1.0 起可用）。

2.啟用AOT

找到 vite.config.js 檔案並透過將 Angular 的插件 jit 選項設為 false 來開啟 AOT：

？配置程式碼覆蓋率

我們可以選擇使用 istanbul 或本機 v8 進行程式碼覆蓋。由於某種原因（仍在調查中），使用 v8 時 Vitest 覆蓋範圍重新映射失敗。解決方案是改用伊斯坦堡。

1.安裝@vitest/coverage-istanbul

確保安裝與 Vitest 主要版本
相符的 Vitest Istanbul 版本

2. 選擇伊斯坦堡作為您的承保提供商

更新 vite.config.mts 以啟用伊斯坦堡覆蓋：

？觀看實際操作

您現在可以執行測試：

然後按一下覆蓋率圖示並欣賞範本的程式碼覆蓋率。 ？

（您也可以在覆蓋率資料夾中找到覆蓋率報告）

請注意，覆蓋率是根據編譯器產生的指令計算的，這意味著：

它甚至適用於結構指令。

現在，你猜怎麼著！ ？

覆蓋範圍也適用於內嵌模板！ ？

☢️ 注意程式碼覆蓋率陷阱

雖然程式碼覆蓋率是一個有用的工具，但應該明智地使用它。將其作為一個指標，而不是一個嚴格的目標。

任何觀察到的統計規律一旦受到控制壓力就會崩潰。

-- 查爾斯‧古德哈特

換句話說，當一項措施成為目標時，它就不再是一個好的措施。

我想補充一點最簡單的指標往往是最具誤導性的。

？接下來是什麼？

Karma 用戶很快將能夠透過簡單的標誌啟用 AOT。

Jest 使用者有三個選項：

• 推薦：遷移到 Vitest。 （？敬請期待，我很快就會分享最順暢的遷移路徑）
• 將實驗建構器與 AOT 結合使用。
• 等待 jest-preset-Angular AOT 支援。

Vitest使用者現在就可以享受AOT的好處。 ？

？其他資源

• ？示範庫
• ？ Angular 提前 (AOT) 編譯器文檔
• ？維泰文檔
• ？ Vitest 上的 Analog 文檔

??‍？實用的角度測試影片課程就在這裡！

如果您厭倦了錯誤，或者厭倦了每次重構時都會中斷的高維護測試，我的視訊課程實用角度測試可以為您提供幫助！

學習實用、可靠的測試策略，以保持您的 Angular 應用程式穩定且可維護。 （現在限時50％折扣！）

以上是Angular 模板程式碼覆蓋率和麵向未來的測試所缺少的要素的詳細內容。更多資訊請關注PHP中文網其他相關文章！