角业力测试：TypeError：无法读取 null 的属性“路径”答案

【问题标题】：Angular karma testing: TypeError: Cannot read property 'path' of null角业力测试：TypeError：无法读取 null 的属性“路径”
【发布时间】：2020-06-02 08:37:07
【问题描述】：

我正在尝试在 Angular 组件上对 Angular Karma 运行一些测试以确定路线。

组件的结构是这样的

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-basic-form',
  templateUrl: './basic-form.component.html',
  styleUrls: ['./basic-form.component.less'],
})
export class BasicFormComponent implements OnInit { 
  constructor(
    public activatedRoute: ActivatedRoute,
  ) {}

  ngOnInit() {
    if(this.activatedRoute.snapshot.routeConfig.path === 'basic-form/:date'){ // route with date
     let date = this.route.snapshot.paramMap.get('date'); // get the date
   } else {
    // no worries, just use the latest date, and this component can be used on multiple routes  
   }
 }

在我的测试文件中有

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { BasicFormComponent } from './basic-form.component';


describe('BasicFormComponent', () => {
  let component: BasicFormComponent;
  let fixture: ComponentFixture<BasicFormComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BasicFormComponent ],
      imports: [DemoMaterialModule, ReactiveFormsModule, FormsModule, HttpClientTestingModule,  RouterTestingModule.withRoutes([])],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
      providers: [
      ]

    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BasicFormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component.activatedRoute.snapshot.routeConfig.path).toBeTruthy(); // why is this not working?
  });

});

我得到的错误是

BasicFormComponent 应该创建 TypeError: Cannot read property null TypeError 的“路径”：无法读取未定义的属性“快照”

为什么不导入激活路由模块？

我正在尝试进行头套测试，这似乎是一门黑暗的艺术。

任何指导将不胜感激。

【问题讨论】：

测试与您的应用程序隔离，对实际路线一无所知。您需要模拟您的 ActivatedRoute。

标签： angular testing karma-jasmine

【解决方案1】：

感谢@Gérôme Grignon 为我指明了正确的方向。

去除错误的答案如下，注意providers中，有使用值设置。没有更多的错误。

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { BasicFormComponent } from './basic-form.component';


describe('BasicFormComponent', () => {
  let component: BasicFormComponent;
  let fixture: ComponentFixture<BasicFormComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BasicFormComponent ],
      imports: [DemoMaterialModule, ReactiveFormsModule, FormsModule, HttpClientTestingModule,  RouterTestingModule.withRoutes([])],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
      providers: [ BasicFormComponent, {
          provide: ActivatedRoute, 
          useValue: {snapshot: {params: {'date': ''}, routeConfig: {'path': 'basic-form-edit/:date'}}}
      }]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BasicFormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component.activatedRoute.snapshot.routeConfig.path).toBeTruthy(); // why is this not working?
  });
});

【讨论】：