角度测试未捕获错误：未捕获（承诺）：类型错误：无法读取 null 的属性（读取“参数”）

Question

I have problem with testing my component. The main problem is when I run fixture.detectChanges(). When I do not fire it, all tests pass without any problems. This is the tests:

 describe("simple HTML", () => { // beforeEach(() => { // fixture.detectChanges(); // }); it('should be created', () => { expect(component).toBeTruthy(); }); it("Component should render html h3 tag with title Icons & Measuerements", () => { const h3Ele = fixture.debugElement.query(By.css(".mainTitle")); expect(h3Ele.nativeElement.textContent).toBe("Icons & Measurements") }) it("Should render h3 tag with text 'Files from blower:' and span with information about current container", () => { const h3Ele = fixture.debugElement.query(By.css(".headerh3")) expect(h3Ele.nativeElement.innerHTML).toBe("Files from blower: <span _ngcontent-a-c391=\\"\\"></span>") }) it("Should display current blower that user is at the moment in span", async () => { const h3Ele = fixture.debugElement.query(By.css(".headerh3 span")) // component.lowBlowId = "test_id" // fixture.detectChanges() debugger }) })

But then i fire this detectChanges() i have this error:

I think the issue may be params in one function i created in ts file.

 async gettingLowBlowId() { this.route.parent.params.subscribe((params) => { this.lowBlowId = params.blower_id }) }

This is my set up in tests:

 let component: IconsInVisualizationComponent; let fixture: ComponentFixture<IconsInVisualizationComponent>; let administrationServiceMock: AdnimistrationSiteService; let visualisationFileStorageManagerServiceMock: VisualisationFileStorageManagerService beforeEach(async () => { administrationServiceMock = jasmine.createSpyObj("AdnimistrationSiteService", ["getAllFilesWithIcons", "changeOrDeleteIcon", "getSensorsForMapping", "deleteSensorsAttachToIcon"]) visualisationFileStorageManagerServiceMock = jasmine.createSpyObj("VisualisationFileStorageManagerService", ["getFoldersList"]) await TestBed.configureTestingModule({ imports: [ HttpClientModule, MatDialogModule, BrowserAnimationsModule, RouterTestingModule, MatSnackBarModule, MatTableModule, ], providers: [ {provide: AdnimistrationSiteService, useValue: administrationServiceMock}, {provide: VisualisationFileStorageManagerService, useValue: visualisationFileStorageManagerServiceMock}, ], declarations: [ IconsInVisualizationComponent ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) .compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(IconsInVisualizationComponent); component = fixture.componentInstance; });

Can you help me with this issue?

Answer 1

In your providers you probably need to add the ActivatedRoute like this :

providers: [
  ...,
  {
    provide: ActivatedRoute,
    useValue: {
      parent: {
        params: of({ blower_id: 2 })
      }
    }
  }
],