使用inject() DI方法的Angular 15测试组件

Question

我正在重构一个组件以使用新的

inject()

依赖注入，但我找不到一种测试它的方法。该组件工作正常，但我的所有测试都被破坏了。我在网上看到了很多关于如何使用它（例如here和here）的功能和服务的解释，但它们似乎不适用于组件。我尝试了所有这些，但我可能错过了一些东西。该套件总是失败并出现以下错误：

NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `EnvironmentInjector#runInContext`. Find more at https://angular.io/errors/NG0203

但我无法理解它:(

非常感谢任何帮助！

这是组件：

import { Component, OnDestroy, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AppDomains } from '../models/kyc-enums.model';

@Component({ template: '' })
export abstract class KycBasePageComponent implements OnDestroy {
    // properties…

    constructor() {
        const route = inject(ActivatedRoute);
        this.appDomain = route.snapshot.data.appDomain;
    }

    // methods…
}

这是我的测试文件：

import { TestBed, inject } from '@angular/core/testing';
import { ActivatedRoute } from '@angular/router';
import { AppDomains } from '../models/kyc-enums.model';
import { KycSteps } from '../models/kyc-steps';
import { KycBasePageComponent } from './base-page.component';
import { IBasePage } from './base-page.interface';

class ConcretePage extends KycBasePageComponent implements IBasePage {}

fdescribe('KycBasePageComponent', () => {
    let component: ConcretePage;
    let activatedRouteMock: ActivatedRoute = {
        snapshot: {
            params: { flowId: '111' },
            data: { appDomain: AppDomains.Onboarding },
        },
    } as unknown as ActivatedRoute;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ConcretePage, KycBasePageComponent],
            providers: [{ provide: ActivatedRoute, useValue: activatedRouteMock }],
        });
    });

    it('should extend KycBasePageComponent', inject([ActivatedRoute], () => {
        component = new ConcretePage();
        expect(component).toBeDefined();
        expect(component.appDomain).toEqual('onboarding');
    }));
});

Answer 1

你能像这样修改下面的代码吗？我们需要构造函数上的

super

来调用抽象类构造函数！

class ConcretePage extends KycBasePageComponent implements IBasePage {
    constructor() {super();}
}
...

...
it('should extend KycBasePageComponent', inject([ActivatedRoute], () => {
    component = new ConcretePage();
    expect(component).toBeDefined();
    expect(component.appDomain).toEqual('onboarding');
}));