Karma Testing Angular - TypeError: Cannot read property 'recipientAddressId' of null

Question

当我尝试使用 karma 进行测试时，出现此错误...

TypeError: Cannot read property 'recipientAddressId' of null

我的组件，

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ApiService } from '../services/api.service';
import { NgxSpinnerService } from "ngx-spinner";

@Component({
  selector: 'app-confirmation',
  templateUrl: './confirmation.component.html',
  styleUrls: ['./confirmation.component.scss']
})
export class ConfirmationComponent implements OnInit {

  cartId:any;
  recipientDetails:any;
  subscriptionId:any;

  interval;
  timeLeft: number = 20;

  constructor(public router: Router,public apiService: ApiService, private spinner: NgxSpinnerService) { 
    this.spinner.show();
    this.cartId = localStorage.getItem('cartId');

    if(!this.cartId){
      this.router.navigate(['product']);
    }
    this.recipientDetails  = JSON.parse(localStorage.getItem('recipientDetails'));
   
    this.subscriptionDetail();
  }

  subscriptionDetail(){
    this.apiService.subscriptionDetails(this.recipientDetails.recipientAddressId).subscribe((res)=>{
      if(res && res.body && res.body.subscriptionDetails && res.body.subscriptionDetails[0]){
        this.subscriptionId = res.body.subscriptionDetails[0].subscriptionId;
        this.spinner.hide();
      } else {
        setTimeout(()=>{ 
          this.subscriptionDetail();
        }, 2000);
      }
      
     });
  }


  ngOnInit(): void {
    localStorage.removeItem('zipCode');
    localStorage.removeItem('recipientDetails');
   
    this.interval = setInterval(() => {
      if(this.timeLeft > 0) {
        this.timeLeft--;
      } else {
        this.router.navigate(['home']);
        console.log("Payment Success.");
        clearInterval(this.interval);
      }
    },1000)


  }


}

Spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ConfirmationComponent } from './confirmation.component';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClient, HttpClientModule, HttpHandler } from '@angular/common/http';
import { FormBuilder } from '@angular/forms';
import { TestAlertService } from '../services/test-alert.service';
import { AlertService } from 'ngx-alerts';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ConfirmationComponent ],
      imports: [RouterTestingModule,HttpClientModule],
      providers: [HttpClient,FormBuilder,HttpHandler,{ provide: AlertService, useClass: TestAlertService }]
    })
    .compileComponents();
  }));

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

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

谢谢...................................... ..................................................... ..................................................... ..................................................... ..................................................... .....................................

Answer 1

您在测试时本地存储中没有 recipientDetails。更新构造函数并改用默认值。

 this.recipientDetails  = JSON.parse(localStorage.getItem('recipientDetails')) || {};

Karma Testing Angular - TypeError: Cannot read property 'recipientAddressId' of null

Karma Testing Angular - TypeError: Cannot read property 'recipientAddressId' of null

angular

typescript

karma-jasmine

karma-coverage