首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 7单元测试依赖注入在ngOnInit中不起作用

答案: 在Angular 7中,单元测试依赖注入在ngOnInit中不起作用的原因是,单元测试的目的是测试组件的逻辑,而ngOnInit是在组件生命周期的初始化阶段调用的钩子函数,用于初始化组件的属性和依赖注入。

在单元测试中,我们可以通过手动创建一个组件实例,并通过构造函数注入依赖。但是,在ngOnInit函数中的依赖注入无法在单元测试中进行,因为它需要由Angular框架自动完成。

为了解决这个问题,我们可以使用Angular提供的测试工具和技术,例如TestBed和fakeAsync,来模拟依赖注入和异步操作。

在编写单元测试之前,我们需要在测试文件的顶部导入相关的测试模块:

import { TestBed, async, ComponentFixture } from '@angular/core/testing'; import { Component } from '@angular/core';

然后,我们可以编写一个测试用例来测试ngOnInit函数中的依赖注入是否正常工作:

describe('MyComponent', () => { let component: MyComponent; let fixture: ComponentFixture<MyComponent>;

beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ MyComponent ] }) .compileComponents(); }));

beforeEach(() => { fixture = TestBed.createComponent(MyComponent); component = fixture.componentInstance; fixture.detectChanges(); });

it('should inject dependencies in ngOnInit', () => { // 模拟依赖注入 const dependency = TestBed.get(MyDependency);

}); });

在这个测试用例中,我们使用TestBed.configureTestingModule来配置测试环境,并使用compileComponents来编译组件。然后,我们创建一个组件实例,并通过TestBed.get来获取依赖注入的实例。接下来,我们调用ngOnInit函数,并断言依赖是否成功注入。

总结: 在Angular 7中,单元测试依赖注入在ngOnInit中不起作用的原因是,ngOnInit是在组件初始化阶段调用的钩子函数,无法在单元测试中自动完成依赖注入。为了解决这个问题,我们可以使用Angular提供的测试工具和技术,例如TestBed和fakeAsync,来模拟依赖注入和异步操作。在编写单元测试时,需要手动注入依赖并调用ngOnInit函数,然后断言依赖是否成功注入。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 依赖注入

本文,我们来了解下 Angular依赖注入 译者添加:维基百科中指出 -- 软件工程依赖注入(Dependency Injection, DI)是指让一个物件接收它所依赖的其他物件。...“依赖”是指接收方所需的对象。“注入”是指将“依赖”传递给接收方的过程。注入”之后,接收方才会调用该“依赖”。...推荐文章依赖注入是什么?如何使用它? 我们都知道 Angular 如何使用服务 services 的标准方法。将服务标记为可注入并将其放入模块的 provider 部分。...如下: 对于依赖注入,我们有很多的小技巧可以使用。比如,模块Angular 可以转换一行 TestService 为不同行写法。... provide 属性,我们可以使用类名或者我们可以创建一个独一无二的键并注入一个对象。我们甚至可以注入一个变量。

66320
  • 依赖注入多模块工程的应用

    在任何需要注入的地方,我们都需要在合适的时机调用底层函数,大多数情况下不是在对象初始化时就是 onCreate 方法。...依赖注入的简要介绍 依赖注入基本上意味着你不用在你需要的地方创建它们,而是别的地方创建。然后这些对象的引用可以被传递到需要使用它们的类。...我们为依赖注入需求选择了 Dagger 意味着我们的依赖图在编译阶段会被创建。下面的章节要记住这一点。...依赖图解 当为一个单块应用引入依赖注入库时,通常整个应用有个单一的依赖图。 这可以使组件间共享依赖一些库依赖可以被设置作用域来避免冲突,或者为被注入对象提供一种特殊的实现。...你可以深入到代码来查看我们如何使用 Dagger 解决 Plaid 依赖注入问题。

    1.8K10

    Golang 依赖注入是 解药 还是 毒药?

    ,是毒药 而也有人认为 依赖注入 是非常好的设计思路,是依赖管理的解药 经过不少项目的磨砺,笔者也终于对依赖注入有了新的认识,但这几个月一直折腾和纠结,到底要不要写本文。...故,本文建议推荐给下述人群: 还在纠结 golang 要不要使用依赖注入的人 对 依赖注入 理解还有所疑惑的人 为了简述,下文有以下简称 依赖注入 简称为:DI 面向对象 简称为:OOP 个人观点...完全的面向过程编程, go 是可行的。 但如果你的项目比较大,又是多人协作,我真心建议你使用 DI,OOP 是有它存在的意义的。...那么也就是意味着,使用可能会导致空指针,也就是没有初始化好,就已经使用了。虽然你一样可以说人为的将所有初始化放在 main 完成。...我也是从 java 过来的, java spring 框架中就有这个概念,当时我在学习 java 的时候就有所了解,但其实当我 golang 实践了之后有了更深刻的认识。

    1.9K41

    Android 通过 Hilt 进行依赖注入

    DI (依赖注入) 是一种程序设计中被广泛使用的技术,非常适合 Android 开发,该技术可以将依赖项提供给类,从而让类不必自己创建这些依赖。...您是否尝试过应用中进行手动依赖注入?即使使用了当今许多现有的依赖注入库,随着您的项目越来越大,这些库仍需要大量模板代码,因为您必须手动构造每个类及其依赖项,并创建容器用来复用和管理依赖项。...不同于 Dagger,Hilt 集成了 Jetpack 库以及 Android Framework 的类,并移除了大部分模板代码,使您可以专注于定义和注入绑定的重要环节,而无需担心管理 Dagger...让我们使用 Hilt 将 AnalyticsAdapter 注入到 MainActivity 。...在此版本,我们支持 ViewModel 和 WorkManager 直接注入

    1.8K20

    Angular 服务

    这也让它更容易使用模拟服务进行单元测试。...不要使用 new 来创建此服务,而要依靠 Angular依赖注入机制把它注入到 HeroesComponent 的构造函数。 服务是多个“互相不知道”的类之间共享信息的好办法。...getHeroes(): void {  this.heroes = this.heroService.getHeroes();}  ngOnInit 调用它 你固然可以构造函数调用 getHeroes...而是选择 ngOnInit 生命周期钩子调用 getHeroes(),之后交由 Angular 处理,它会在构造出 HeroesComponent 的实例之后的某个合适的时机调用 ngOnInit。...你注入把 HeroService 注册为该服务的提供商,以便在别处可以注入它。 你使用 Angular 依赖注入机制把它注入到了组件

    3.3K70

    提示 依赖注入多模块工程的应用

    在任何需要注入的地方,我们都需要在合适的时机调用底层函数,大多数情况下不是在对象初始化时就是 onCreate 方法。...依赖注入的简要介绍 依赖注入基本上意味着你不用在你需要的地方创建它们,而是别的地方创建。然后这些对象的引用可以被传递到需要使用它们的类。...我们为依赖注入需求选择了 Dagger 意味着我们的依赖图在编译阶段会被创建。下面的章节要记住这一点。...依赖图解 当为一个单块应用引入依赖注入库时,通常整个应用有个单一的依赖图。 ? 这可以使组件间共享依赖一些库依赖可以被设置作用域来避免冲突,或者为被注入对象提供一种特殊的实现。...你可以深入到代码来查看我们如何使用 Dagger 解决 Plaid 依赖注入问题。

    1.7K10

    Angular constructor vs ngOnInit

    Angular 学习过程,相信很多初学者对 constructor 和 ngOnInit 的应用场景和区别会存在困惑,本文我们会通过实际的例子,为读者一步步解开困惑。...constructor ES6 中就引入了类,constructor(构造函数)是类的特殊方法,主要用来做初始化操作,进行类实例化操作时,会被自动调用。...ngOnInitAngular 组件生命周期中的一个钩子,Angular 的所有钩子和调用顺序如下: ngOnChanges —— 当数据绑定输入属性的值发生变化时调用 ngOnInit ——...constructor 应用场景 Angular ,构造函数一般用于依赖注入或执行一些简单的初始化操作。...{ name: string = ''; constructor(public elementRef: ElementRef) { // 使用构造注入方式注入依赖对象 this.name

    1.4K20

    AngularDart4.0 英雄之旅-教程-06服务 顶

    不是一遍又一遍复制和粘贴相同的代码,而是创建一个可重用的数据服务,并将其注入到需要它的组件。 使用单独的服务可使组件保持精简并专注于支持视图,并使用模拟服务对组件进行单元测试变得容易。...导入HeroService,以便您可以代码引用它。...现在Angular知道创建一个新的AppComponent时要提供一个HeroService实例。 依赖注入页面阅读更多关于依赖注入的内容。...当组件实现该方法时,Angular会在适当的时候调用它。 “Lifecycle Hooks”页面详细了解生命周期挂钩。...将OnInit添加到由AppComponent实现的接口列表,并使用里面的初始化逻辑编写一个ngOnInit()方法。 Angular会在正确的时间调用它。

    2.9K10

    Angular 6.x 基础教程

    答案是项目根目录下的 angular.json 文件,已经默认帮我们配置了默认的前缀,具体如下: "angular6-fundamentals": { "root": "",...第三节 - 事件和模板引用 Angular ,我们可以使用 (eventName) 语法,进行事件绑定。此外,可以使用 #variableName 的语法,定义模板引用。...第五节 - 注入服务 新建服务 $ ng g s mail 命令行窗口运行以上命令后,将输出以下内容: CREATE src/app/mail.service.spec.ts (362 bytes)...第十节 - 组件样式 Angular ,我们可以设置组件元数据时通过 styles 或 styleUrls 属性,来设置组件的内联样式和外联样式。... Angular ,对应的指令是 ngClass 。接下来我们来看一下,ngClass 指令的具体应用。

    15.6K20

    Angular学习笔记(一)

    @Component 的配置项包括: selector - CSS 选择器,它告诉 Angular 父级 HTML 查找标签,创建并插入该组件。...providers - 组件所需服务的依赖注入提供商数组。 数据绑定 Angular 支持数据绑定,一种让模板的各部分与组件的各部分相互合作的机制。...依赖注入 大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。 2....ngOnInit() Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。...每个 Angular 变更检测周期中调用,ngOnChanges() 和 ngOnInit() 之后。 ngAfterContentInit() 当把内容投影进组件之后调用。

    3.3K20

    基础 | Angular2生命周期钩子函数

    比如,OnInit接口的钩子方法叫做ngOnInitAngular创建组件后立刻调用它 生命周期执行顺序 ngOnChanges 在有输入属性的情况下才会调用,该方法接受当前和上一属性值的SimpleChanges...ngOnInit 组件初始化的时候调用,只调用一次,第一次调用ngOnChanges之后调用 ngDoCheck 组件定义的属性或方法变更时调用(用于脏值之检测,非常耗性能,因为会把所有的属性和方法都检测一遍...上面代码书写是按顺序的,看下面控制台打印: 现在我们钩子函数的顺序打乱,在看看代码 控制台输出跟上面是一样的 constructor和ngOnInit constructor是ES6class...Angular的组件就是基于class类实现的,Angular,constructor用于注入依赖ngOnInitAngular中生命周期的一部分,constructor后执行。...Angular中用于初始化变量和数据绑定等 NgChanges 当我们监听了OnChanges钩子。

    77640

    Angular实战之使用NG-ZORRO创建一个企业级后台框架(进阶篇)

    : 注意:constructor 构造函数(依赖注入,起到对应局部变量值初始化作用): 除了使用简单的值对局部变量进行初始化之外,什么都不应该做!!!...该方法接受当前和上一属性值的 SimpleChanges 对象 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。...每个变更检测周期中,紧跟在 ngOnChanges() 和 ngOnInit() 后面调用。...它允许你做以下这些事情: 创建一个新的 Angular 应用程序 运行带有 LiveReload 支持的开发服务器,以便在开发过程预览应用程序 添加功能到现有的 Angular 应用程序 运行应用程序的单元测试

    4K20

    Angular2 之 单元测试

    组件的测试 单独的service测试 Angular的测试工具 Angular的测试工具类包含了TestBed类和一些辅助函数方法,当时这不是唯一的,你可以不依赖Angular 的DI(依赖注入)系统,...TestBed类和@angular/core/testing的一些方法。...detectChanges:测试Angular变化检测。 每个测试程序都通过调用fixture.detectChanges() 来通知Angular执行变化检测。...Angular注入系统是层次化的。 可以有很多层注入器,从根TestBed创建的注入器下来贯穿整个组件树。 最安全并总是有效的获取注入服务的方法,是从被测试的组件的注入器获取。...被注入组件的userService实例是彻底不一样的对象,是提供的userServiceStub 的克隆。 TestBed.get方法从根注入获取服务。

    5.5K20

    Angular 从入坑到挖坑 - 组件食用指南

    4.1.2、模板绑定语法 angular 应用,组件扮演着控制器或是视图模型的作用,创建组件时会关联一个 html 文件,这个 html 文件则是一个基础的 angular 模板文件 在这个模板文件...="">请选择 AMD Ryzen 7 3700X <option value="i5-9400f"...组件中使用服务 需要使用的组件引入服务,然后组件的构造函数通过依赖注入的方式注入这个服务,就可以组件完成对于这个服务的使用 父组件对数据进行赋值,然后调用服务的方法改变数据信息...子组件引入服务,从而同步获取到父组件修改后的服务的数据信息 import { Component, OnInit } from '@angular/core'; // 引入服务 import...五、组件的生命周期钩子函数 当 angular 创建、更新、销毁组件时都会触发组件的生命周期钩子函数,通过组件实现这些生命周期函数,从而介入到这些关键时刻 钩子函数 触发时机 ngOnChanges

    15.8K30

    单元测试如何正确的处理第三方依赖

    今天,就稍微聊一下单元测试,如何处理第三方依赖这个小的点吧。最近晨跑时突然想到这个并总结了下,于是想着用文字把自己的思考记录下来。...而如果在单元测试,无法排除这些第三方依赖带来的干扰,则意味着本身你的单元测试也是不可预测的。因为第三方依赖可能正确,可能失败,你没法正确的去断言。...这样积累下来,你就不会想频繁的运行单元测试了,因为时间太久了。慢慢的单元测试就会被整个项目组忽略,没有谁希望把时间总浪费等待执行的过程。 解决之道 当然,没有什么是不能解决的。...我对自己写的代码,有严格的单元测试覆盖率的自我要求,我很多年的经验积累之上,我总结了几种编写单元测试应对解决第三方依赖的措施与方法,以供参考。 总共有四个,相信我,来来去去都离不开这几种方式的。...,测试邮件发送验证码,与其去真正发送一个邮件,不如mock一个邮件网关`,这样单元测试,我就可以方便的Mock它正确与错误的情况下,我的代码的执行是否符合预期。

    2K20
    领券