为什么我不能模拟组件模板中使用的管道？

Question

我正在尝试编写一个组件测试，该测试具有一个模拟管道，用于替换模板中使用的实际管道。

当组件在测试世界中渲染时，其模板(正在执行：{{ name | hello }}(将生成实际的真实世界管道，而不是模拟管道。

如果我通过组件的构造函数使用依赖项注入：

constructor(public p: HelloPipe) {}

我看到这个p属性实际上是我期望的MockPipe类，但由于某种原因我不理解，组件模板中管道的使用与注入器提供的管道不同。。。

我做了一个叠词来说明这个问题。

请查看hello.component.spec.ts文件，您会在底部的it('works')规范中看到，我有一条注释，强调来自注入器的p属性是模拟管道，但从html{{ name | hello }}呈现的文本使用的是真实管道，而不是模拟管道。

如何让模板使用模拟管道而不是真实管道？

Answer 1

您需要对测试台配置和模拟管道进行一些更改，以使其在模板上工作

• 删除HelloModule导入，这样就不会导入真正的管道
• 更改mock管道，使其具有名称元数据
• 在声明数组中添加模拟管道

@Pipe({
name: 'hello',
})
export class MockPipe implements PipeTransform {
transform(value: string) {
return 'mocked!';
}
}
TestBed.configureTestingModule({
imports: [CommonModule],
declarations: [HelloComponent, MockPipe],
providers: [{ provide: HelloPipe, useClass: MockPipe }],
}).compileComponents();