Angular测试：异步函数执行后组件更新异常，测试失败排查

核心原因 #

测试断言失败是因为异步代码的执行时机不匹配：

• fetchOrders 方法包含两层异步逻辑：setTimeout（宏任务）和 Observable 订阅（微任务）
• 测试中调用 component.fetchOrders() 后立刻执行 expect，此时异步代码还未执行完毕，performInfiniteScroll 仍为初始的 true，导致断言失败
• 控制台能看到属性更新，是因为同步代码执行完后，事件循环才处理异步任务，此时属性已经被修改

另外还有一个容易忽略的细节：你模拟 fetchFoodOrders 返回的是 of([{id: 1}])，但原代码中判断的是 data.total_length，如果返回数据没有这个属性，if 条件不会触发，performInfiniteScroll 永远不会被设为 false。

解决方案 #

方案一：使用 fakeAsync + tick（推荐） #

Angular 测试提供的 fakeAsync 和 tick 可以同步处理异步操作，完美适配定时任务和 Observable 场景：

describe('#fetchOrders', () => {
  it('should disable infinite scroll', fakeAsync(() => {
    // 模拟返回包含 total_length 的数据，匹配原代码判断逻辑
    mockFoodOrderProvider.fetchFoodOrders.and.returnValue(of({ 
      id: 1, 
      total_length: 1 
    }))
    mockFoodOrderProvider.foodOrderLength.and.returnValue(1)
    mockFoodOrderProvider.incompleteOrderLength = 1
    
    component.fetchOrders(1, true)

    // 触发 setTimeout 和 Observable 订阅的执行
    tick(10);
    // 触发变更检测，确保组件属性更新同步到测试环境
    fixture.detectChanges();

    expect(component.performInfiniteScroll).toEqual(false)
  }))
})

方案二：使用 async + fixture.whenStable() #

如果习惯基于 Promise 的异步测试风格，可采用这种方式：

describe('#fetchOrders', () => {
  it('should disable infinite scroll', async(() => {
    mockFoodOrderProvider.fetchFoodOrders.and.returnValue(of({ 
      id: 1, 
      total_length: 1 
    }))
    mockFoodOrderProvider.foodOrderLength.and.returnValue(1)
    mockFoodOrderProvider.incompleteOrderLength = 1
    
    component.fetchOrders(1, true)

    // 等待所有异步操作完成
    await fixture.whenStable();
    fixture.detectChanges();

    expect(component.performInfiniteScroll).toEqual(false)
  }))
})

方案三：使用 done 回调 #

如果必须用回调方式，需确保在异步操作完成后调用 done()：

describe('#fetchOrders', () => {
  it('should disable infinite scroll', (done) => {
    mockFoodOrderProvider.fetchFoodOrders.and.returnValue(of({ 
      id: 1, 
      total_length: 1 
    }))
    mockFoodOrderProvider.foodOrderLength.and.returnValue(1)
    mockFoodOrderProvider.incompleteOrderLength = 1
    
    component.fetchOrders(1, true)

    // 等待足够时间让异步代码执行完毕
    setTimeout(() => {
      fixture.detectChanges();
      expect(component.performInfiniteScroll).toEqual(false)
      done();
    }, 20);
  })
})

关键注意点 #

• 必须保证模拟的 fetchFoodOrders 返回数据包含 total_length 属性，否则原代码的判断条件不会触发，performInfiniteScroll 不会被修改
• 异步操作完成后要调用 fixture.detectChanges()，确保组件属性变更同步到测试上下文

内容的提问来源于stack exchange，提问作者Jeremy Thomas