对于单元测试中没有构造函数的扩展类,Angular 10 依赖注入失败

Posted

技术标签:

【中文标题】对于单元测试中没有构造函数的扩展类,Angular 10 依赖注入失败【英文标题】:Angular 10 Dependency Injection fails for extension classes without constructors in unit tests 【发布时间】:2021-04-26 17:52:16 【问题描述】:

我最近将 Angular 应用程序从版本 8 升级到版本 10。在应用程序中,我使用了类似以下模式的扩展类:

@Injectable()
export class MyBaseClass 
  constructor(myDependencyService: MyDependencyService,...) 


@Injectable()
export class MyExtensionClass extends MyBaseClass 
  // no explicit constructor in extension class

应用程序按预期运行,所有依赖项在扩展类实例化时正确注入基类构造函数。但是,当运行单元测试时,依赖注入会崩溃,并且基类构造函数的所有参数都是未定义的。

查看浏览器开发工具中编译的源代码,Angular 为扩展类生成的工厂在执行测试时与运行应用程序时看起来完全不同:在运行测试时,编译后的工厂在以下情况下不传递任何参数创建扩展类。

我已遵循升级到 Ivy 编译器的所有建议,并且所有使用 DI 的类都经过修饰并在应用程序中正常工作。执行测试时是否有一些特殊性导致不同的编译结果?我是否错过了一些影响单元测试的配置更改?

更新:我已经向代码覆盖率报告者指出了这个 DI 问题。当我删除覆盖选项时,依赖项被正确注入。覆盖率报告器和 Angular 编译器之间似乎存在一些冲突。我正在使用 karma-coverage-istanbul-reporter 版本 3.0.2。

【问题讨论】:

不是这个问题,但我建议不要在 2 个或更多主要版本之间升级。先升级到 9,然后再升级到 10。这也有助于解决仅在一个版本而不是 2 中所做的更改的问题。 我应该在描述中提到我按照你的建议做了。我根据 Angular 的建议准备升级,首先升级到 Angular 9,然后升级到 Angular 10。我没有在这期间运行测试套件。 【参考方案1】:

原来这是在 tsconfig.spec.json 中针对 es2015(或更高版本)时的一个已知问题:https://github.com/angular/angular-cli/issues/14860。

解决方法是针对 es5。

【讨论】:

以上是关于对于单元测试中没有构造函数的扩展类,Angular 10 依赖注入失败的主要内容,如果未能解决你的问题,请参考以下文章

在 Jest 测试框架中访问 Angular 服务构造函数

如何对不可变类构造函数进行单元测试?

从测试类调用测试类的非默认构造函数

Angular中的单元测试点击事件

来自 node_modules 的 Angular 单元测试 spyOn 类

Jest - Angular 9 - 类构造函数 SomeComponentClass 不能在没有'new'的情况下被调用