Reactive forms双向绑定在Jasmine/Karma测试中表现不同的原因是什么？

出现该现象的核心差异是Angular运行时环境与Karma测试环境的变更检测触发逻辑不同：

• 正常启动应用（即bootstrapApp模式）时，Angular依赖Zone.js监听所有用户交互、异步任务等事件，事件触发后会自动执行变更检测，双向绑定的内容会自动同步到视图，所以你在输入框输入的内容会立刻展示在下方span中。
• 启动测试（即bootstrapTests模式）时，Angular测试框架为了保证测试的可控性，默认关闭了自动变更检测逻辑。你在测试中模拟输入操作之后，组件的绑定属性已经更新，但没有触发变更检测同步到视图，所以span标签的内容不会发生变化，导致测试失败。

修复方案 #

你只需要在测试代码的用户交互逻辑后，手动触发变更检测即可：

1. 模拟输入操作完成后，执行fixture.detectChanges()手动触发视图更新
2. 如果你希望测试环境尽可能贴近运行时的自动检测逻辑，可以在TestBed配置中添加如下 providers 配置：

{ provide: ComponentFixtureAutoDetect, useValue: true }

注意：自动检测仅能覆盖部分场景，异步操作完成后依然需要手动调用fixture.detectChanges()保证视图已更新。

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