Angular点击计数功能Jasmine单元测试Expected 0 to be 1报错排查

问题根因 #

你的测试代码存在两处核心问题：

1. 没有绑定当前测试的组件实例：代码中直接读取component.cnt，但你从来没有给component变量赋值为当前用例的组件实例，读到的要么是其他用例残留的旧值，要么是undefined，所以拿到的cnt是初始的0，和实际点击后更新的值不符。
2. 缺失初始变更检测步骤：创建组件实例后没有执行第一次变更检测，初始视图状态和组件属性没有同步。
   另外如果你的实际代码里By .css中间真的有空格，属于语法错误，需要删掉空格改成By.css。

修正后可用的测试代码 #

it("check events with debugelement",()=>{
      const fixture = TestBed.createComponent(AppComponent);
      // 绑定当前测试的组件实例
      const component = fixture.componentInstance;
      const debug = fixture.debugElement;
      // 执行初始变更检测，同步初始渲染状态
      fixture.detectChanges();

      const h2 = debug.query(By.css('h2'));
      const btn = debug.query(By.css('#button1'));

      btn.triggerEventHandler('click',{});
      // 点击后触发变更检测更新视图
      fixture.detectChanges();

      let x = component.cnt;
      let y = parseInt(h2.nativeElement.innerText);
      expect(x).toBe(y);
})

内容的提问来源于stack exchange，提问作者ugenthar V