在 Angular2 和 Jasmine 中进行测试答案

【问题标题】：Testing in Angular2 and Jasmine在 Angular2 和 Jasmine 中进行测试
【发布时间】：2018-07-16 12:51:43
【问题描述】：

我为一个组件编写了一个简单的规范，我的问题是关于测试的行为。

测试将检查是否创建了组件。看起来好像当我运行测试时，套件首先编译并运行 Component 类，检查某些变量状态，如果不满足，则测试失败。

请看下面的例子：

组件构造函数：

constructor(
    public route: ActivatedRoute,
    public pageService: PageService,
    private homeService: HomeService,
    public staticInfoService: StaticInfoService,
    private lang: LangService,
    public router: Router,
    public usersService: UsersService,
) {
    super(pageService, route);
    this.route.data.subscribe(data => {

        this.entityCounts = data.number;
        console.log(' +++ entity counts are ', data.number);
    });

    this.getRecentSelections();
    this.setEntityTotals();

}

此组件的测试非常简单 - 检查组件是否已定义。

组件.spec.ts

fit('should create', () => {
    expect(component).toBeTruthy();
});

我相信规范设置正确。但是我在运行测试时收到的错误消息是：

TypeError：src/test.ts 中的数据为空（第 46535 行）

但是我已经模拟了这条路线，并附上了数据。

class MockRouter {
    navigate = jasmine.createSpy('navigate');

    data = {
        value: 100,
    };
}

expect(mockRouter.data).toBeDefined();

当期望它被定义时，会抛出相同的错误消息。

如果有人可以提供有关此测试究竟为什么会导致此问题的见解，我们将不胜感激。谢谢，

【问题讨论】：

标签： angular typescript jasmine

【解决方案1】：

数据属性类型为observable。因此，您应该将模拟数据作为 observable 类型传递。那么只有你可以subscribe它

试试这个

import 'rxjs/add/observable/of';// import this
class MockRouter {
navigate = jasmine.createSpy('navigate');
data = Observable.of(100);   
}

【讨论】：

感谢建议，错误信息依旧。

【解决方案2】：

在构造函数中订阅可观察对象通常是一种不好的做法。使用生命周期方法ngOnInit 订阅。

另外，你应该模拟你的ActivatedRoute，而不是你的Router。检查这个问题，了解如何模拟 ActivatedRoute How to unit test a component that depends on parameters from ActivatedRoute?

【讨论】：