angular - 检查后表达式已更改，在使用 jasmine 测试 angular 2 组件时出错

Question

我在测试从服务接收可观察对象的组件时遇到错误，我试图在规范中模拟该行为，但我收到以下错误:表达式在检查后已更改，之前的值 ' '，当前值:[对象对象]。你能帮我解决这个问题吗？我的规范文件如下:

import { ManualProcessService } from '../../services/manual-process.service';
import { ManualProcessComponent } from './manual-process.component';
import { MANUALPROCESSMOCKDATA } from '../../shared/mocks/mock-manualprocessdata';
import {DataTableModule, SharedModule, DropdownModule as PrimeNgDropDownModule, CheckboxModule, InputTextModule} from 'primeng/primeng';
import {MenuModule} from 'primeng/components/menu/menu';
import {DropdownModule} from 'ng2-bootstrap';
import { PopoverModule } from 'ng2-popover';
import {Observable} from 'rxjs/Observable';
import { IManualProcessData} from '../../models/manual-process.model';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {
  async,
  TestBed,
  fakeAsync,
  tick,
} from '@angular/core/testing';

class MockManualProcessService {

  getManualProcessData(): Observable<IManualProcessData> {
      return Observable.of(MANUALPROCESSMOCKDATA);
  }
}

describe('Testing Manual Process Component', () => {

  let fixture,
  event = {
    first: 0,
    rows: 10
  }, 
  manualProcessService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        ManualProcessComponent
      ],
      providers: [
        { provide: ManualProcessService, useClass: MockManualProcessService }
      ],
      imports: [
        FormsModule, 
        ReactiveFormsModule,
        DataTableModule,
        SharedModule,
        PopoverModule,
        PrimeNgDropDownModule,
        DropdownModule.forRoot(),
        CheckboxModule,
        InputTextModule,
        MenuModule
    ],
    });
    fixture = TestBed.createComponent(ManualProcessComponent);
    manualProcessService = TestBed.get(ManualProcessService);
    spyOn(manualProcessService, 'getManualProcessData').and.returnValue(Observable.of(MANUALPROCESSMOCKDATA));
    fixture.detectChanges();
  });

  it('Filters should be reset', (done) => {
    fixture.componentInstance.clearFilters()
    fixture.detectChanges();
    expect(fixture.componentInstance.filterBy.length).toBe(0);
    done();
  })


  it('Should load list of manual process files', fakeAsync(() => {
    fixture.componentInstance.loadData(event);
    tick();
    fixture.detectChanges();
    expect(fixture.componentInstance.filterBy.length).toBe(10);
  }));
});

我是 Angular 2 和单元测试的新手。有人可以指导，我做错了什么。

Answer 1

我也遇到了这个问题，并更改了我的测试以直接针对组件的 ngOnInit() 方法。所以，而不是

fixture.detectChanges();

在你的测试中，你可以尝试

fixture.componentInstance.ngOnInit();

(或任何生命周期 Hook 是您组件的入口点)。那对我有用。即使组件本身运行良好，它也能使我免于失败的测试。