测试可从 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 被用于测试。 我自己从不使用它，因为它倾向于通过不报告来掩盖实际问题，我希望看到它们并修复它们。 :)