TL;DR: 為Angular 測試啟用提前(AOT) 編譯，以獲得準確的模板程式碼覆蓋率、更快的測試執行速度、生產對稱性和麵向未來的能力測試。
此選項已可供 Vitest 使用者使用，很快就會可供 Karma 和 Jest（實驗建構器）使用者使用。
無論您使用 Karma、Jest 還是 Vitest，您都可能會使用即時 (JIT) 編譯來進行 Angular 測試，因為 直到最近，它還是唯一可用的選項。
問題是 JIT 有一些顯著的缺點：
自從 Angular 8 和 IVy 的引入以來，Angular 編譯器已經開始將模板轉換為指令。除了許多其他好處之外，這還意味著程式碼覆蓋率工具可以將這些指令對應到模板並相應地計算程式碼覆蓋率。
理論上，從 Angular 8 開始就可以透過使用 AOT 運行測試來產生程式碼覆蓋率，但該選項在 Karma 或 Jest 中不可用。 自從 Analog 團隊加入了 Vitest 對 Angular 的支援後，才可以啟用 AOT 進行測試。
截至 2024 年 11 月：
無論您使用 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 相容，但它會產生一定的成本：
目前，我建議使用 JIT 進行淺層測試，直到 TestBed#overrideComponent 支援 AOT 或 Angular 團隊提供更好的替代方案。您可以透過對淺層測試使用單獨的配置來實現此目的，該配置使用 JIT 來進行與 *.jit.spec.ts 等特定模式相符的測試。
找到 vite.config.js 檔案並透過將 Angular 的插件 jit 選項設為 false 來開啟 AOT：
我們可以選擇使用 istanbul 或本機 v8 進行程式碼覆蓋。由於某種原因（仍在調查中），使用 v8 時 Vitest 覆蓋範圍重新映射失敗。解決方案是改用伊斯坦堡。
確保安裝與 Vitest 主要版本
相符的 Vitest Istanbul 版本
更新 vite.config.mts 以啟用伊斯坦堡覆蓋：
您現在可以執行測試：
然後按一下覆蓋率圖示並欣賞範本的程式碼覆蓋率。 ？
（您也可以在覆蓋率資料夾中找到覆蓋率報告）
請注意，覆蓋率是根據編譯器產生的指令計算的，這意味著：
它甚至適用於結構指令。
現在，你猜怎麼著！ ？
覆蓋範圍也適用於內嵌模板！ ？
雖然程式碼覆蓋率是一個有用的工具，但應該明智地使用它。將其作為一個指標，而不是一個嚴格的目標。
任何觀察到的統計規律一旦受到控制壓力就會崩潰。
-- 查爾斯‧古德哈特
換句話說，當一項措施成為目標時，它就不再是一個好的措施。
我想補充一點最簡單的指標往往是最具誤導性的。
Karma 用戶很快將能夠透過簡單的標誌啟用 AOT。
Jest 使用者有三個選項：
Vitest使用者現在就可以享受AOT的好處。 ？
如果您厭倦了錯誤，或者厭倦了每次重構時都會中斷的高維護測試，我的視訊課程實用角度測試可以為您提供幫助！
學習實用、可靠的測試策略，以保持您的 Angular 應用程式穩定且可維護。 （現在限時50％折扣！）
以上是Angular 模板程式碼覆蓋率和麵向未來的測試所缺少的要素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
