Question

我不明白为什么这个简单的测试行不通。

BannerComponent should not have welcome message after construction
Expected 'welcome' to be undefined.

//组件

@Component({
  selector: 'iwdf-banner',
  template: `
    <p>
      {{me}}
    </p>
  `,
  styles: []
})
export class BannerComponent implements OnInit {
  me: string;
  constructor() { }
  ngOnInit() {
    this.me = 'welcome';
  }
}

//测试

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BannerComponent ]
    })
    .compileComponents();
  }));

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

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

  it('should not have welcome message after construction', () => {
    expect(component.me).toBeUndefined();
  });

  it('should welcome logged in user after Angular calls ngOnInit', () => {
      component.ngOnInit();
      expect(component.me).toContain('welcome');
  });
});

Answer 1

好吧，TestBed确实会在检测到更改时运行所有必要的生命周期挂钩。因此，可以预期该变量已定义。不要使用fixture.detectChanges()。那一个勾住了。

Answer 2

调用TestBed.createComponent将调用组件的构造函数，但不会调用任何生命周期挂钩。

OnInit生命周期挂钩将在您首次调用fixture.detectChanges()时被调用，您在每次测试之前都将执行此操作。因此，这就是me具有值welcome而不是未定义的原因。

您可以通过以下方法解决此问题：从fixture.detectChanges()中删除beforeEach，然后将其移到需要它的各个测试中（除了那一个失败的测试之外，其他所有测试）。将行替换为ngOnInit后，您无需在上一次测试中手动调用fixture.detectChanges()。

如果要在没有角度测试台的情况下测试组件，则手动调用ngOnInit可能会很有用-然后，您必须自己照顾依赖性和生命周期，这是我不建议的。

角度单元测试道具永远是不确定的

2 个答案: