最近嘗試在 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 單元測試的人應該很有幫助:
-
如果你用 Angular 17 的話,還是建議你直接看新版 Angular.dev 網站上的 Testing 文件!
只要注意本文上方提到的地雷即可。
-
如果你並非使用「獨立元件」架構,其實你直接看舊版 Angular.io 網站下的 Testing 文件即可,這是完全沒問題的!
舊版文件也可以看 angular.tw 的正體中文的 測試 文件,整個系列的文件看完,基本上很容易就能上手。
-
新手上路最缺的就是「範例程式」了,只要有「範例程式」可以看,你隨時都可以用「複製/貼上」的方式來開發單元測試的程式碼。
我真的不是開玩笑,要開始寫單元測試時,很多時候寫不出來,就是去看別人的程式碼,然後「複製/貼上」,然後「修改」,這樣才能快速上手。
我推薦去下載 Angular 在 GitHub Repo 上的 Testing 範例程式,這裡有相當完整的範例程式可供參考,還有一些撰寫非同步程式時的工具函式可用,例如 asyncData 或 asyncError 之類的,都可以從這份範例程式找到。
-
推薦一本免費的 Testing Angular 電子書 (英文),整本書的內容都可以線上瀏覽,還可以下載 EPUB 格式的電子書回去離線閱讀。
-
最後,當然是不要忘記 Angular Taiwan 臉書社團,有問題都可以來這裡交流,還有 台灣 Angular 技術論壇 也可以來這裡進行更深入的討論。
相關連結