TL;DR: 為 Angular 測(cè)試啟用提前 (AOT) 編譯，以獲得準(zhǔn)確的模板代碼覆蓋率、更快的測(cè)試執(zhí)行速度、生產(chǎn)對(duì)稱性和面向未來(lái)的能力測(cè)試。

該選項(xiàng)已可供 Vitest 用戶使用，并且很快將可供 Karma 和 Jest（實(shí)驗(yàn)構(gòu)建器）用戶使用。

？ JIT 出了什么問(wèn)題？

無(wú)論您使用 Karma、Jest 還是 Vitest，您都可能會(huì)使用即時(shí) (JIT) 編譯來(lái)進(jìn)行 Angular 測(cè)試，因?yàn)?直到最近，它還是唯一可用的選項(xiàng)。

問(wèn)題是 JIT 有一些顯著的缺點(diǎn)：

• 代碼覆蓋率不準(zhǔn)確，因?yàn)槲纯紤]模板。
• 它較慢，因?yàn)闇y(cè)試會(huì)動(dòng)態(tài)編譯模板。
• 它不是面向未來(lái)的，因?yàn)?Angular 已經(jīng)達(dá)到了 JIT 兼容性的極限。根據(jù)設(shè)計(jì)，某些功能根本不可能通過(guò) JIT 來(lái)實(shí)現(xiàn)。
• 與使用AOT的生產(chǎn)環(huán)境不對(duì)稱。

? 為什么是現(xiàn)在？

自從 Angular 8 和 IVy 的引入以來(lái)，Angular 編譯器已經(jīng)開(kāi)始將模板轉(zhuǎn)換為指令。除了許多其他好處之外，這還意味著代碼覆蓋率工具可以將這些指令映射到模板并相應(yīng)地計(jì)算代碼覆蓋率。

理論上，從 Angular 8 開(kāi)始就可以通過(guò)使用 AOT 運(yùn)行測(cè)試來(lái)生成代碼覆蓋率，但該選項(xiàng)在 Karma 或 Jest 中不可用。 自從 Analog 團(tuán)隊(duì)添加了 Vitest 對(duì) Angular 的支持后，才可以啟用 AOT 進(jìn)行測(cè)試。

截至 2024 年 11 月：

• Vitest是唯一支持AOT編譯的選項(xiàng)。
• Karma 和 Jest Experimental Builder 有開(kāi)放的 PR 來(lái)支持 AOT。

？ AOT 測(cè)試的其他好處

?? 更快的測(cè)試執(zhí)行

無(wú)論您使用 JIT 還是 AOT，組件最終都會(huì)在某個(gè)時(shí)刻被編譯。主要區(qū)別在于，使用 AOT 時(shí)，編譯只需完成一次并可以緩存，而使用 JIT 時(shí)，每個(gè)測(cè)試模塊最終可能會(huì)重新編譯組件。

這意味著即使 AOT 的轉(zhuǎn)換階段有點(diǎn)慢，整體測(cè)試執(zhí)行時(shí)間也會(huì)更快。我看到的數(shù)字表明執(zhí)行速度提高了約 20%，但這在很大程度上取決于測(cè)試的結(jié)構(gòu)和被測(cè)系統(tǒng)。

？生產(chǎn)對(duì)稱性

我們通常希望我們的測(cè)試與生產(chǎn)環(huán)境盡可能對(duì)稱，以增加信心。這通常具有挑戰(zhàn)性，因?yàn)樗枰c其他屬性（例如測(cè)試速度、被測(cè)系統(tǒng)的大小或可預(yù)測(cè)性）進(jìn)行平衡。

AOT 的有趣之處在于它在不損害其他屬性的情況下提高了生產(chǎn)對(duì)稱性。 使用 AOT，您將獲得更多信心并實(shí)現(xiàn)更接近生產(chǎn)的行為。

？面向未來(lái)的測(cè)試

更重要的是，JIT 已經(jīng)達(dá)到了極限，并且正在成為 Angular 的負(fù)擔(dān)。例如，JIT 根本不支持某些 Angular 功能（例如可延遲視圖）。 Angular 路線圖中的其他潛在功能，例如無(wú)選擇器組件，可能無(wú)法與 JIT 一起使用。

實(shí)際上，自從 Angular 的信號(hào)輸入（以及類似的函數(shù)式 API） 以來(lái)，JIT 已經(jīng)需要一些最小的轉(zhuǎn)換才能工作。

通過(guò)切換到 AOT，您可以使您的測(cè)試面向未來(lái)，準(zhǔn)備好從任何創(chuàng)新中受益，并為 JIT 的未來(lái)做好準(zhǔn)備。

？缺點(diǎn)

？應(yīng)避免動(dòng)態(tài)組件構(gòu)造

通過(guò)打開(kāi) AOT，一些依賴動(dòng)態(tài)構(gòu)造的技術(shù)將會(huì)被破壞。

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

// ? This is broken with AOT.
const fixture = render(`<app-button></app-button>`, { imports: [Button] });

function render(template, { imports }) {
  @Component({
    template,
    imports,
  })
  class TestContainer {}

  return TestBed.createComponent(TestContainer);
}

但是，繞過(guò)AOT編譯仍然是可能的（??暫時(shí)???）:

function render(template, { imports }) {
  @Component({
    jit: true,
    template,
    imports,
  })
  class TestContainer {}

  return TestBed.createComponent(TestContainer);
}

我的建議是盡可能避免此類構(gòu)造，并更喜歡在需要時(shí)創(chuàng)建特定于測(cè)試的組件，即使它可能有點(diǎn)冗長(zhǎng)。將來(lái)，Angular 團(tuán)隊(duì)可以提供既兼容 AOT 又更少樣板的替代方案。

？淺層測(cè)試更具挑戰(zhàn)性

雖然淺層測(cè)試不應(yīng)該是您的主要測(cè)試策略，因?yàn)樗纳a(chǎn)對(duì)稱性也較差，但它仍然是您工具箱中的一項(xiàng)有用技術(shù)。

使用 AOT，目前無(wú)法使用 TestBed#overrideComponent 覆蓋組件的導(dǎo)入。

解決方法是使用測(cè)試框架的 API 在模塊級(jí)別覆蓋組件的依賴項(xiàng)，并用其測(cè)試替身替換組件。

例如，使用 Vitest：

// app.cmp.spec.ts
vi.mock('./street-map.cmp', async () => {
  return {
    StreetMap: await import('./street-map-fake.cmp').then(
      (m) => m.StreetMapFake
    ),
  };
});

// street-map-fake.cmp.ts
@Component({
  selector: 'app-street-map',
  template: 'Fake Street Map',
})
class StreetMapFake implements StreetMap {
  // ...
}

雖然這個(gè)臨時(shí)解決方法與 AOT 兼容，但它會(huì)產(chǎn)生一定的成本：

• 它的可讀性較差，而且更加冗長(zhǎng)。
• 模塊級(jí)別的“Mocking”（或提供測(cè)試替身） 粒度較小，可預(yù)測(cè)性較差。
• 它與您正在使用的測(cè)試框架高度耦合。

目前，我建議使用 JIT 進(jìn)行淺層測(cè)試，直到 TestBed#overrideComponent 支持 AOT 或 Angular 團(tuán)隊(duì)提供更好的替代方案。您可以通過(guò)對(duì)淺層測(cè)試使用單獨(dú)的配置來(lái)實(shí)現(xiàn)此目的，該配置使用 JIT 來(lái)進(jìn)行與 *.jit.spec.ts 等特定模式匹配的測(cè)試。

???？嘗試一下 Vitest 與 AOT

1. 設(shè)置Vitest

• 對(duì)于 Angular CLI 用戶，請(qǐng)使用 Analog 的原理圖。
• 對(duì)于 Nx 用戶，在生成應(yīng)用程序或庫(kù)時(shí)選擇 vitest 選項(xiàng)（自 Nx 20.1.0 起可用）。

2.啟用AOT

找到 vite.config.js 文件并通過(guò)將 Angular 的插件 jit 選項(xiàng)設(shè)置為 false 來(lái)打開(kāi) AOT：

// ? This is broken with AOT.
const fixture = render(`<app-button></app-button>`, { imports: [Button] });

function render(template, { imports }) {
  @Component({
    template,
    imports,
  })
  class TestContainer {}

  return TestBed.createComponent(TestContainer);
}

？配置代碼覆蓋率

我們可以選擇使用 istanbul 或本機(jī) v8 進(jìn)行代碼覆蓋。由于某種原因（仍在調(diào)查中），使用 v8 時(shí) Vitest 覆蓋范圍重新映射失敗。解決方案是改用伊斯坦布爾。

1.安裝@vitest/coverage-istanbul

確保安裝與 Vitest 主要版本
匹配的 Vitest Istanbul 版本

function render(template, { imports }) {
  @Component({
    jit: true,
    template,
    imports,
  })
  class TestContainer {}

  return TestBed.createComponent(TestContainer);
}

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

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

// app.cmp.spec.ts
vi.mock('./street-map.cmp', async () => {
  return {
    StreetMap: await import('./street-map-fake.cmp').then(
      (m) => m.StreetMapFake
    ),
  };
});

// street-map-fake.cmp.ts
@Component({
  selector: 'app-street-map',
  template: 'Fake Street Map',
})
class StreetMapFake implements StreetMap {
  // ...
}

？觀看實(shí)際操作

您現(xiàn)在可以運(yùn)行測(cè)試：

export default defineConfig({
  ...
  plugins: [
    angular({ jit: false }),
    ...
  ],
  ...
});

然后單擊覆蓋率圖標(biāo)并欣賞模板的代碼覆蓋率。 ？

（您還可以在覆蓋率文件夾中找到覆蓋率報(bào)告）

請(qǐng)注意，覆蓋率是根據(jù)編譯器生成的指令計(jì)算的，這意味著：

它甚至適用于結(jié)構(gòu)指令。

現(xiàn)在，你猜怎么著?。?/p>

覆蓋范圍也適用于內(nèi)聯(lián)模板！ ？

?? 注意代碼覆蓋率陷阱

雖然代碼覆蓋率是一個(gè)有用的工具，但應(yīng)該明智地使用它。將其作為一個(gè)指標(biāo)，而不是一個(gè)嚴(yán)格的目標(biāo)。

任何觀察到的統(tǒng)計(jì)規(guī)律一旦受到控制壓力就會(huì)崩潰。

-- 查爾斯·古德哈特

換句話說(shuō)，當(dāng)一項(xiàng)措施成為目標(biāo)時(shí)，它就不再是一個(gè)好的措施。

我想補(bǔ)充一點(diǎn)最簡(jiǎn)單的指標(biāo)往往是最具誤導(dǎo)性的。

？接下來(lái)是什么？

Karma 用戶很快將能夠通過(guò)簡(jiǎn)單的標(biāo)志啟用 AOT。

Jest 用戶有三個(gè)選項(xiàng)：

• 推薦：遷移到 Vitest。 （？敬請(qǐng)期待，我很快就會(huì)分享最順暢的遷移路徑）
• 將實(shí)驗(yàn)構(gòu)建器與 AOT 結(jié)合使用。
• 等待 jest-preset-Angular AOT 支持。

Vitest用戶現(xiàn)在就可以享受AOT的好處。 ？

？其他資源

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

???？實(shí)用的角度測(cè)試視頻課程就在這里！

如果您厭倦了錯(cuò)誤，或者厭倦了每次重構(gòu)時(shí)都會(huì)中斷的高維護(hù)測(cè)試，我的視頻課程實(shí)用角度測(cè)試可以為您提供幫助！

學(xué)習(xí)實(shí)用、可靠的測(cè)試策略，以保持您的 Angular 應(yīng)用程序穩(wěn)定且可維護(hù)。 （現(xiàn)在限時(shí)50％折扣?。?/em>

以上是Angular 模板代碼覆蓋率和面向未來(lái)的測(cè)試所缺少的要素的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！