Question

我尝试重新创建我们在实际项目中使用的部分代码，在运行 ng test 后我收到此错误 - “AfterAll TypeError：无法读取未定义的属性 'isCompleted'。

单元测试规范文件。

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EventService } from 'src/app/event.service';

import { UnitTestComponent } from './unit-test.component';

describe('UnitTestComponent', () => {
  let component: UnitTestComponent;
  let fixture: ComponentFixture<UnitTestComponent>;
  let eventService: EventService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [UnitTestComponent],
      imports: [HttpClientTestingModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(UnitTestComponent);
    component = fixture.componentInstance;
    eventService = TestBed.inject(EventService);
    fixture.detectChanges();
  });

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

单元测试组件

import { Component, OnInit } from '@angular/core';
import { EventService } from 'src/app/event.service';

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

  formStatus: string = "formId2";
  isApproval: boolean = false;

  constructor(private eventService: EventService) { }

  ngOnInit(): void {
    this.getForms();
  }

  getForms(): void {
    this.eventService.forms.subscribe(res => {
      if (res) {
        this.isApproval = res.find(f => f.formId == this.formStatus).isCompleted;
      }
    })
  }
}

UnitTestService

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class UnitTestService {
    private URL = 'http://localhost:4200/assets/db.json';
    constructor(private http: HttpClient) { }
    // Make the HTTP request:

    getData() {
        return this.http.get(this.URL);
    }

}

活动服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class EventService {
    private _formEventSub = new BehaviorSubject<any[]>([]);
    public forms = this._formEventSub.asObservable();

    updateValue(data: any[]) {
        this._formEventSub.next(data);
    }
}

谁能告诉我为什么会这样，谢谢。

Answer 1

您的 forms 是一个空数组，这就是它无法读取 isCompleted 中 undefined 属性 getForms 的原因。

模拟 EventService，如下所示：

describe('UnitTestComponent', () => {
  let component: UnitTestComponent;
  let fixture: ComponentFixture<UnitTestComponent>;
  let mockEventService: jasmine.SpyObj<EventService>;

  beforeEach(async () => {
    // first string is up to you what to name as an identifier, second array of strings are the public methods you would like to mock
    mockEventService = jasmine.createSpyObj('EventService', ['getData']);
    // mock the forms property on this mock
    mockEventService.forms = new BehaviorSubject([{ formId: 'formId2', isCompleted: true }]);
    await TestBed.configureTestingModule({
      declarations: [UnitTestComponent],
      imports: [HttpClientTestingModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      // mock the EventService in providers section
      providers: [{ provide: EventService, useValue: mockEventService }]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(UnitTestComponent);
    component = fixture.componentInstance;
    eventService = TestBed.inject(EventService);
    fixture.detectChanges();
  });

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

这应该足以让您畅通无阻。

AfterAll TypeError：无法读取未定义的属性“isCompleted” - Angular 单元测试

1 个答案: