Angular组件测试设置@Input值后快照未按预期更新问题

根因分析 #

你在测试代码中修改label属性后没有手动触发Angular的变更检测，模板并未同步最新的属性值重新渲染，所以快照捕获的仍然是初始渲染的内容。

Angular单元测试环境默认关闭了自动变更检测，所有组件属性的修改都需要主动触发变更检测才会同步到视图层：你的label初始值为undefined，首次渲染时!label判断为真，所以渲染出<span>No label</span>，后续你赋值'My label'后没有触发视图更新，模板内容自然没有变化。

修复方法 #

修改测试代码，赋值完成后调用fixture.detectChanges()触发变更检测即可：

component.label = 'My label';
// 新增该行触发视图同步更新
fixture.detectChanges();
expect(component).toMatchSnapshot();

如果你的组件配置了ChangeDetectionStrategy.OnPush变更检测策略，也可以选择先标记组件为需要更新再触发检测，效果一致：

component.label = 'My label';
fixture.componentRef.changeDetectorRef.markForCheck();
fixture.detectChanges();
expect(component).toMatchSnapshot();

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