測試可從 angular 服務觀察到的，angular4

Question

我想在角度分量中測試 Observable 返回數據。

我創建了一個 slackblitz https://stackblitz.com/edit/observable-testing-101 。

在這里可以看到組件+服務的邏輯。

我的測試代碼也包含在 slack 中。

在我的本地 m/c 上，我遇到了錯誤： Expected undefined to be 1.

請幫忙，我是測試角度的新手。

Answer 1

注意：在 stackblitz 中進行測試需要與上面不同的設置。 我已將您的數據復制到此處的 Angular Stackblitz 測試環境中： https ://stackblitz.com/edit/stackoverflow-q-53039354?file = app%2Fmy.component.spec.ts

由於您使用的是 Angular 4，我必須安裝 rxjs.compat 才能在 stackblitz 中運行您的代碼，因為我在那里使用的是 Angular 7。

設置好后，我遇到的第一件事是：

Failed: <spyOn> : getPostObservable() method does not exist 
Usage: spyOn(<object>, <methodName>)

果然， getPostObservable()在你放在 stackblitz 中的 data.service.ts 文件中不存在。 但是， getTodoObservable()確實存在，因此我將測試更改為指向該函數。

然后我收到了你上面提到的消息：

Expected undefined to be 1

我注意到你有兩個beforeEach()實例，一個在規范之前的beforeEach() ，另一個在規范中的“應該從 observable 中獲取”。 第一次調用 fixture.detectChanges 時，它會調用生命周期鈎子進行初始化，並且 ngOnInit() 將被執行，所以你要小心，在調用它之前，你已經在 ngOnInit() 中設置了你需要使用的任何間諜。 我注釋掉了第一個調用，現在測試可以工作了。

我還注釋掉了 'whenStable'，因為這里也不需要它 - 您正在返回一個帶有 'of' 的可觀察對象，它會立即解決，所以不需要這個。 我還注釋掉了您對 console.log(this.response) 的調用，因為您沒有定義響應對象，並且它在控制台輸出中給出了“未定義”。 我還添加了 console.log(component) ，因為當我試圖找出組件看起來不像我期望的那樣時，我發現這對輸出很有用。 （如果您不知道，請單擊開發服務器測試窗口底部的“控制台”一詞以打開控制台日志。）

最后一個觀察：我真的不喜歡看到 NO_ERRORS_SCHEMA 被用於測試。 我自己從不使用它，因為它傾向於通過不報告來掩蓋實際問題，我希望看到它們並修復它們。 :)