Angular与Jasmine滚动测试问题：指令滚动测试的时序异常排查

核心原因 #

你的测试容器.test-container未设置overflow-x: scroll或overflow: auto属性，浏览器不会将其识别为可滚动容器。设置scrollLeft后，浏览器会立刻将其重置为0——而添加debugger时，调试环境的布局重绘会临时让元素进入可滚动状态，所以手动查看时值正确，但自动化测试中无此触发逻辑，值被强制重置。

修复步骤 #

1. 给测试容器添加可滚动样式 #

修改测试组件模板中的.test-container，补充overflow-x: scroll：

<div class="test-container" style="width: 200px; height: 200px; overflow-x: scroll">

2. 简化测试逻辑（无需异步工具） #

设置scrollLeft是同步操作，不需要fakeAsync、tick这类处理异步任务的工具，修改测试用例如下：

it('Should properly test scrolling', () => {
  // 场景1：滚动到最左侧
  divEl.nativeElement.scrollLeft = 0;
  divEl.nativeElement.dispatchEvent(new Event('scroll'));
  fixture.detectChanges();
  expect(divEl.nativeElement.scrollLeft).toBe(0);

  // 场景2：滚动到中间位置
  divEl.nativeElement.scrollLeft = 200;
  divEl.nativeElement.dispatchEvent(new Event('scroll'));
  fixture.detectChanges();
  expect(divEl.nativeElement.scrollLeft).toBe(200);
});

额外说明 #

你之前误判为异步时序问题，实际上是元素不具备可滚动特性导致的scrollLeft被重置。fakeAsync、tick仅用于处理Angular异步任务（如HTTP请求、定时器），本次场景完全不需要。

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