Karma-Jasmine：TypeError：无法读取未定义的属性（读取“get”）

Question

我正在尝试为我的角度组件编写一个单元测试，但我遇到了这个错误。我在堆栈溢出和一些在线文档上对此进行了很多研究。这是我到目前为止没有运气尝试过的资源链接。

• How to ActivatedRoute in Angular and how to mock it in Unit Tests
• How to unit test a component that depends on parameters from ActivatedRoute?
• How do you mock ActivatedRoute

下面是我的代码

.ts 文件

export class SomeComponent implements OnInit {
  id = '--';
  
  constructor(
    private readonly someService: SomeService,
    private readonly utilsService: UtilsService,
    private readonly router: Router,
    readonly route: ActivatedRoute,
  ) {}

  ngOnInit() {
    this.id = this.route.snapshot.queryParamMap.get('id');
    this.getDetails();
  }

  viewInventory(){
    this.router.navigate(['..'], {
      relativeTo: this.route
    });
  }

  getDetails() {
    if (this.id) {
      this.getResourceOverview();
    }
  }

  getResourceOverview(): void {
    const resourceID = `search_keys=${"resource_id"}&search=${this.id}`
    this.resourceId = this.id
    this.someService
      .getResourceOverview(resourceID)
      .subscribe(
        (response) => {
          const result = response as any;
          if (result && something) {
            this.id = something  || '--';
          }
        },
        (error) => {
          console.log('Resource overview details failed with error', error);
        }
      );
  }
}

.ts.spec

class mockHttpWrapperService {
  readonly isApiReady = false;
}

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

  beforeEach(async(() => {
    activatedRouteSpy = {
      snapshot: {
        paramMap: convertToParamMap({
          id: 'dads123',
          code: 'IBM',
        })
      }
    };
    TestBed.configureTestingModule({
      declarations: [SomeComponent],
      imports: [
        SomeLibModule, CarbonModule, SomeModule.forRoot(),
        RouterModule.forRoot([])
      ],
      providers: [
        { provide: NGXLogger, useClass: MockNGXLogger },
        { provide: HttpWrapperService, useClass: mockHttpWrapperService },
        { provide: Router, useClass: class { navigate = jasmine.createSpy("navigate"); }},
        ApiContractService,
        TranslationService,
        ApiService,
        ApiContractService,
        TranslationService,
        SomeService,
        {
         provide: ActivatedRoute,
         useValue: activatedRouteSpy
        }
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
    .compileComponents()
    .then(() => {
      fixture = TestBed.createComponent(SomeComponent);
      component = fixture.debugElement.componentInstance;
      fixture.detectChanges();
      component.ngOnInit();
    })
  }));

  it('should create 1 ', () => {
    expect(component).toBeTruthy();
  });
})

下面是错误信息

Chrome 93.0.4577 (Linux 0.0.0) SomeComponent should create 1  FAILED
TypeError: Cannot read properties of undefined (reading 'get')

Answer 1

在您的测试设置中，您提供以下激活的路线：

activatedRouteSpy = {
  snapshot: {
    paramMap: convertToParamMap({
      id: 'dads123',
      code: 'IBM',
    })
  }
};

在您的 ngOnInit 中，您可以像这样访问它：

this.id = this.route.snapshot.queryParamMap.get('id');

您的间谍没有queryParamMap 属性，而只有paramMap。在您的间谍中重命名它或同时提供paramMap 和queryParamMap，如果您需要更进一步的话。