Karma 测试 Angular - TypeError：无法读取 null 的属性“recipientAddressId”

Posted 2023-03-16

【中文标题】Karma 测试 Angular - TypeError：无法读取 null 的属性“recipientAddressId”

【英文标题】：Karma Testing Angular - TypeError: Cannot read property 'recipientAddressId' of null

【发布时间】：2020-11-16 15:08:25

【问题描述】：

当我尝试使用 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)


  

规格.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();
  );
);

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

【参考方案1】：

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

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

【讨论】：

感谢您的回复，当我在上面添加此代码时，beforeEach(async(()... 它显示 'TypeError: Cannot set property 'recipientDetails' of undefined'。