Angular 测试中没有 $injector 的提供者

Posted 2023-02-19

【中文标题】Angular 测试中没有 $injector 的提供者

【英文标题】：No provider for $injector in Angular Testing

【发布时间】：2019-07-06 04:00:30

【问题描述】：

我一直在尝试在我们的 Hybrid AngularJS/NG6 应用程序中设置测试，但是哇，这很难做到。我不断收到错误。最新的是：

错误：StaticInjectorError(DynamicTestModule)[$injector]：

StaticInjectorError(Platform: core)[$injector]:

NullInjectorError: 没有 $injector 的提供者！

我有以下component：

import  Component, OnInit, Input, Inject  from '@angular/core';
import  DashboardService  from '../../services/dashboard/dashboard.service';

@Component(
    templateUrl: './views/components/dashboard/dashboard.component.html'
)
export class DashboardComponent implements OnInit 
    @Input()
    Session;
    Util;
    constructor(
        private _dashboardService: DashboardService,
        @Inject('Session') Session: any,
        @Inject('Util') Util: any
    ) 
        this.Session = Session;
        this.Util = Util;
    

    ngOnInit() 
        this._dashboardService
            .getPrograms(this.Session.user.organization)
            .subscribe(
                data => 
                    console.log(data);
                ,
                error => 
                    console.log(error);
                
            );
    

效果很好。我可以从我们的 API 中提取数据。另一方面，我有这个spec 文件：

import  async, ComponentFixture, TestBed  from '@angular/core/testing';
import  FormsModule, ReactiveFormsModule  from '@angular/forms';
import  CommonModule  from '@angular/common';

import  DashboardComponent  from './dashboard.component';
import  DebugElement  from '@angular/core';

import  DashboardService  from '../../services/dashboard/dashboard.service';
import  ApiService  from '../../services/api.service';

import  HttpClientModule  from '@angular/common/http';

describe('The Dashboard', () => 
    let component: DashboardComponent;
    let fixture: ComponentFixture<DashboardComponent>;
    let de: DebugElement;

    beforeEach(async(() => 
        TestBed.configureTestingModule(
            imports: [
                CommonModule,
                FormsModule,
                ReactiveFormsModule,
                HttpClientModule
            ],
            declarations: [DashboardComponent],
            providers: [
                
                    provide: 'Util',
                    useFactory: ($injector: any) => $injector.get('Util'),
                    deps: ['$injector']
                ,
                
                    provide: 'Session',
                    useFactory: ($injector: any) => $injector.get('Session'),
                    deps: ['$injector']
                ,
                DashboardService,
                ApiService            
            ]
        )
            .overrideComponent(DashboardComponent, 
                set: 
                    templateUrl:
                        '/dist/views/components/dashboard/dashboard.component.html'
                
            )
            .compileComponents();
    ));

    beforeEach(() => 
        fixture = TestBed.createComponent(DashboardComponent);
        component = fixture.componentInstance;
        de = fixture.debugElement;
        fixture.detectChanges();
    );

    it('should be created', () => 
        expect(component).toBeTruthy();
    );
);

当我运行这个spec 文件时，我得到了上面列出的错误。我不知道错误试图告诉我什么，因为它非常模糊。

如何将$Injector 模块正确地提供到spec 文件中？

【参考方案1】：

我还尝试在我的混合应用程序中测试依赖于 AngularJS 的 Angular 部件，但我没有成功。在混合中测试具有 Angular 依赖项的 AngularJS 部件或具有 AngularJS 依赖项的 Angular 部件是非常困难的。 我从 GitHub 上的 post 中找到了两种可能的解决方案 - 完全模拟来自其他框架的部分。 - 创建包含来自其他框架的所有依赖项的迷你应用程序。

【讨论】：

你说的非常对，我最终没有在测试中使用 AngularJS 部件（即 $Injector），因为那非常令人头疼，而且任何地方都没有文档。我创建了一个新的迷你服务，其中包含我在其中使用的所有 AngularJS 内容并对其进行测试。问题解决了。

嘿@EdgarQuintero，你能分享一下模拟$injector的样本吗？我也陷入了同样的困境，我尝试模拟 $injector，但它不起作用。

@NeerajShende Injector 问题实际上是因为 SessionService 返回用户和所有其他内容。我刚刚创建了一个存在于同一个spec 文件中的MockSessionService extends SessionService 类，在该类中它还模拟了真实 SessionService 中的所有函数，只是返回一些静态值。例如，在 MockSessionService 类（扩展 SessionService）中，getToken 函数只是返回一些随机字符串。