angular - Angular 10 单元测试 - 组件实例返回未定义
问题描述
我在组件实例上获得未定义的值。在我从 angular 8 升级到 angular 10 之前,它一直在工作。我在测试中唯一改变的是,async() 到 waitForAsync(),因为不推荐使用 async。
describe('ProtocolInfoComponent', () => {
let component: ProtocolInfoComponent;
let fixture: ComponentFixture<ProtocolInfoComponent>;
const mockActivatedRoute = new MockActivatedRoute({
parent: new MockActivatedRoute({
params: of({ studyId: 1001 })
})
});
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [FormsModule,
AppConfigModule,
SharedModule,
HttpClientTestingModule
],
declarations: [ ProtocolInfoComponent ],
providers: [
{ provide: UserService, useClass: UserServiceStub },
{ provide: APP_CONFIG_STUB, useClass: APP_DI_CONFIG_STUB },
{ provide: StudySetupService, useClass: StudySetupServiceStub },
{ provide: StudyCreateService, useClass: StudyCreateServiceStub },
{ provide: ActivatedRoute, useValue: mockActivatedRoute },
{ provide: Router, useClass: RouterStub }]
})
.compileComponents().then(() => {
AppInjector.setInjector(TestBed.inject(Injector));
});
}));
beforeEach(() => {
console.log('TestBed', TestBed.createComponent(ProtocolInfoComponent));
fixture = TestBed.createComponent(ProtocolInfoComponent);
console.log('Fixture',fixture);
component = fixture.componentInstance;
console.log('Component',component);
fixture.detectChanges();
});
it('should create', () => {
console.log('=====component=====',component)
expect(component).toBeTruthy();
});
it('should have the study', () => {
expect(component.study).not.toBe(null);
});
it('should have the responsibiltiies', () => {
expect(component.responsibilities).not.toBe(null);
expect(component.orgResponsibilities).not.toBe(null);
});
});
我在测试中有控制台语句,以查看夹具和组件的值。两者都是未定义的。它适用于其他测试,我对如何解决这个问题有同样的想法。
解决方案
终于能够想通了。在提供者数组中,提供之一是 useValue 而不是 useClass;
{ provide: APP_CONFIG_STUB, useValue: APP_DI_CONFIG_STUB }
推荐阅读
- java - 装箱/拆箱成本和装箱对象是否有写入时复制?
- javascript - React-Leaflet 地图未在地图上呈现数据
- ruby-on-rails - 如何从 Rails 渲染 json 中删除 Content-Disposition?
- sql - 如果存在,则选择具有值的记录,否则选择第二个值,否则选择第三个。(分层)
- vcf-vcard - 使用 vObject 创建多 URL vCard
- typescript - 打字稿,更改嵌套在界面中的所有匹配键的类型
- reactjs - 如何在 reactjs 的表中显示 csv 文件数据
- java - Java 类型参数不在类型变量的范围内
- c# - 将字符串转换为十六进制字符串
- acumatica - 在发布状态的传输屏幕 (IN304000) 中启用 UDF