Angular 2单元测试：自定义管道错误找不到管道

Posted 2023-02-26

【中文标题】Angular 2单元测试：自定义管道错误找不到管道

【英文标题】：Angular 2 Unit Test: Custom Pipe error The pipe could not be found

【发布时间】：2017-05-23 10:33:35

【问题描述】：

我有一个名为“myPipe”的自定义管道。我得到：

找不到管道“myPipe”错误

在我的单元测试 ts.请建议在我的 .spec.ts 中导入和声明什么

这是我的 .spec.ts

import  async, ComponentFixture, TestBed  from '@angular/core/testing';
import  By  from '@angular/platform-browser';
import  DebugElement  from '@angular/core';

import  MyComponent  from './main-page-carousel.component';

describe('CarouselComponent', () => 
  let component: MyComponent ;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => 
    TestBed.configureTestingModule(
      declarations: [ MyComponent ],
    )
    .compileComponents();
  ));

  beforeEach(() => 
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  );

  it('should create', () => 
    expect(component).toBeTruthy();
  );
);

谢谢！

【问题讨论】：

您说的是myPipe，但您的测试与CarouselComponent 相关？你不应该导入myPipe 吗？

还要检查这个“找不到管道”条目：***.com/questions/39007130/…

【参考方案1】：

你应该可以这样做：

import  MyPipe  from 'here put your custom pipe path';

TestBed.configureTestingModule(
    declarations: [ MyComponentUnderTesting, MyPipe ]
)

【讨论】：

我们如何在根模块中声明它？这样就不需要在每个规范文件中声明

我很困惑 b/c 我将管道作为提供程序导入到我的测试平台模块中，如果它被注入到 tsc 组件中是正确的。但是，b/c 我在 html 文件中使用它，管道必须作为声明导入。

@jonuojha，你有没有找到一种方法来为测试规范全局声明自定义管道？

谢谢，它拯救了我的一天。关于这个主题的最佳答案之一。

【参考方案2】：

我遇到了同样的问题，并通过在我的 spec.ts 中添加以下“模拟管道”来解决它：

import Pipe, PipeTransform from '@angular/core';

@Pipe(name: 'myPipe')
class MockPipe implements PipeTransform 
    transform(value: number): number 
        // blah blah
        return value;
    

然后你必须将 MockPipe 添加到 TestBed 的 configureTestingModule 声明中：

TestBed.configureTestingModule(
  declarations: [ MyComponentUnderTesting, MockPipe ]
)

【参考方案3】：

我遇到了几乎相同的管道问题；在模板解析错误的情况下，您需要采取两个步骤：

在开始时导入所需的管道，如：

import your_pipe_name from '../your/pipe/location';

将其添加到您的声明中：

TestBed.configureTestingModule( declarations: [ your_pipe ] );

编码愉快！

【参考方案4】：

看起来您为管道起了别名/命名，但没有人基于此回答。例如，如果您的管道名为 myCustomPipe，但这与管道的类名不同：

import  Pipe, PipeTransform  from '@angular/core';

@Pipe(
  name: 'myCustomPipe',
  pure: false
)
export class MyPipe implements PipeTransform 
    // ....

然后在您的spec.ts 文件中，您可以按如下方式导入您的管道，否则将找不到：

import  MyPipe as myCustomPipe  from 'path/to/pipe';

在您的beforeEach() 中，您需要将别名引用为declaration 和provider：

beforeEach(() => 
    TestBed.configureTestingModule(
        imports: [ ... ],
        declarations: [ myCustomPipe, etc],
        providers: [ myCustomPipe, etc ]
    ).compilecomponents();

    // etc
);

【参考方案5】：

你应该开始类似

import  TestBed, async  from '@angular/core/testing';
import  MyPipe  from 'here put your custom pipe path';

describe('Pipe: MyPipe', () => 
  it('create an instance', () => 
    let pipe = new MyPipe();
    expect(pipe).toBeTruthy();
  );
);