我正在使用 TestBed 测试一个 Angular 18 独立组件,并在单元测试期间初始化组件时遇到此错误:错误:NG0203:必须从注入上下文(例如构造函数、工厂函数、字段初始化器或与 一起使用的函数)调用 inject() runInInjectionContext
。更多信息请访问https://angular.dev/errors/NG0203
以下是该组件的测试用例:
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SomeComponent } from './some-component.component';
import { ActivatedRoute } from '@angular/router';
import { of } from 'rxjs';
describe('SomeComponent', () => {
let component: SomeComponent;
let fixture: ComponentFixture<SomeComponent>;
let mockRoute: jasmine.SpyObj<ActivatedRoute>;
beforeEach(async () => {
mockRoute = jasmine.createSpyObj('ActivatedRoute', ['fragment'], { fragment: of('test-anchor') });
await TestBed.configureTestingModule({
imports: [SomeComponent],
providers: [{ provide: ActivatedRoute, useValue: mockRoute }],
}).compileComponents();
fixture = TestBed.createComponent(SomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
组件代码:
import { Component, OnDestroy } from '@angular/core';
import { LibCommonService, PLATFORM_BEHAVIOR_TYPE_ENUM, PreferencesDashboardComponent } from '@pseudoLib/pseudo-common-elements';
import { TranslateModule } from '@ngx-translate/core';
import { ActivatedRoute } from '@angular/router';
import { Subject, takeUntil } from 'rxjs';
import { NgIf } from '@angular/common';
import { DetailsService } from 'src/shared/services/details.service';
import { MEMBER_TYPE_ENUM } from 'src/shared/models/enums/details.enum';
@Component({
selector: 'app-some',
standalone: true,
imports: [TranslateModule, NgIf, PreferencesDashboardComponent],
templateUrl: './some.component.html',
styleUrl: './some.component.scss',
})
export class SomeComponent implements OnDestroy {
private destroy$ = new Subject<void>();
PLATFORM_BEHAVIOR_TYPE_ENUM = PLATFORM_BEHAVIOR_TYPE_ENUM;
projectId!: string;
memberId!: string;
memberType!: PLATFORM_BEHAVIOR_TYPE_ENUM;
constructor(
private activatedRoute: ActivatedRoute,
private libCommonService: LibCommonService,
private DetailsService: DetailsService,
) {
this.projectId = this.libCommonService.projectIdBehaviorSub.getValue();
this.activatedRoute.parent?.params?.pipe(takeUntil(this.destroy$)).subscribe((params) => {
this.memberId = params.id;
});
this.DetailsService.memberDetails$.pipe(takeUntil(this.destroy$)).subscribe(async (memberDetails) => {
if (memberDetails?.memberType === MEMBER_TYPE_ENUM.PRIMARY) {
this.memberType = PLATFORM_BEHAVIOR_TYPE_ENUM.PRIMARY_MEMBER;
} else if (memberDetails?.memberType === MEMBER_TYPE_ENUM.ASSOCIATE) {
this.memberType = PLATFORM_BEHAVIOR_TYPE_ENUM.ASSOCIATE_MEMBER;
}
});
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
}
如何解决测试环境中的 NG0203: inject() 错误?如有任何关于如何正确配置使用此服务的独立组件测试环境的建议,我们将不胜感激。
Angular 版本: Angular 18
由于没有
inject
调用,组件代码本身不会产生错误。错误肯定来自注入的服务之一LibCommonService
,DetailsService
或者来自您从组件中删除的 SO 代码。坚持认为这是由服务引起的:
由于您想要对组件进行单元测试,因此您应该模拟这些服务。
通过消除这些依赖关系可以消除错误