The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

整理幾個 Angular 單元測試的學習資源與注意事項

最近嘗試在 Angular 的「獨立元件」架構下撰寫單元測試,發現有些技巧官方文件沒寫清楚的問題,需要特別注意。除此之外,這篇文章我還打算整理一些學習資源給大家參考。

鬼打牆的 provideHttpClientTesting() 用法

由於從 Angular 17 開始,透過 ng new 建立的專案就是以「獨立元件」架構為主,而大部分的 Angular 模組也都看不到了,我原本想說在寫單元測試的時候,應該也會是相同的架構,但看官方文件的時候,否而被誤導了,以下我就說明一下我這次鬼打牆的過程。

首先,我在 AppComponent 注入一個 HttpClient 服務,因此我要在 app.config.ts 加入 provideHttpClient() 提供者設定:

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
};

接著,我在 app.component.spec.ts 中調整 TestBed 的設定 (注意: 這是錯誤的設定):

await TestBed.configureTestingModule({
  imports: [AppComponent],
  providers: [
    provideHttpClientTesting(),
  ]
}).compileComponents();

我為什麼會這樣寫呢?因為新版 Test requests 文件的 Setup for testing 就是這樣給範例的!

TestBed.configureTestingModule({
  providers: [
    // ... other test providers
    provideHttpClientTesting(),
  ],
});
const httpTesting = TestBed.inject(HttpTestingController);

我壓根沒想到,在 app.component.spec.ts 中還需要註冊 provideHttpClient() 提供者,為什麼沒想到呢?因為在舊版 Test requests 文件中的 Setup for testing 小節,是這樣宣告的:

TestBed.configureTestingModule({
  imports: [ HttpClientTestingModule ]
});

以前就不用特別匯入 HttpClientModule 了,對吧!所以到了獨立元件架構,應該也不用註冊 provideHttpClient() 提供者不是嗎?

我錯了!

正確的宣告方法如下:

await TestBed.configureTestingModule({
  imports: [AppComponent],
  providers: [
    provideHttpClient(),
    provideHttpClientTesting(),
  ]
}).compileComponents();

這樣才能正確的宣告單元測試中 TestBed 所需的測試模組。我真的覺得這點實在是太雷了!

最氣人的點是,舊式的寫法完全可以跑,也就是說,以下這段 Code 也是完全正確的寫法:

TestBed.configureTestingModule({
  imports: [ HttpClientTestingModule ]
});

簡單來說,我要是不要雞婆的一定要用新的「獨立元件」架構下的風格來寫「單元測試」,那就完全不會踩到地雷,我就是完全被「新版文件」給誤導了!😅

學習資源

以下我列出幾個我覺得不錯的學習資源,這對想開始寫 Angular 單元測試的人應該很有幫助:

  1. 如果你用 Angular 17 的話,還是建議你直接看新版 Angular.dev 網站上的 Testing 文件!

    只要注意本文上方提到的地雷即可。

  2. 如果你並非使用「獨立元件」架構,其實你直接看舊版 Angular.io 網站下的 Testing 文件即可,這是完全沒問題的!

    舊版文件也可以看 angular.tw 的正體中文的 測試 文件,整個系列的文件看完,基本上很容易就能上手。

  3. 新手上路最缺的就是「範例程式」了,只要有「範例程式」可以看,你隨時都可以用「複製/貼上」的方式來開發單元測試的程式碼。

    我真的不是開玩笑,要開始寫單元測試時,很多時候寫不出來,就是去看別人的程式碼,然後「複製/貼上」,然後「修改」,這樣才能快速上手。

    我推薦去下載 Angular 在 GitHub Repo 上的 Testing 範例程式,這裡有相當完整的範例程式可供參考,還有一些撰寫非同步程式時的工具函式可用,例如 asyncDataasyncError 之類的,都可以從這份範例程式找到。

  4. 推薦一本免費的 Testing Angular 電子書 (英文),整本書的內容都可以線上瀏覽,還可以下載 EPUB 格式的電子書回去離線閱讀。

  5. 最後,當然是不要忘記 Angular Taiwan 臉書社團,有問題都可以來這裡交流,還有 台灣 Angular 技術論壇 也可以來這裡進行更深入的討論。

相關連結

留言評論