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

【问题标题】：Angular 2 Unit Test: Custom Pipe error The pipe could not be foundAngular 2单元测试：自定义管道错误找不到管道
【发布时间】：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 吗？
还要检查这个“找不到管道”条目：stackoverflow.com/questions/39007130/…

标签： unit-testing angular

【解决方案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();
  });
});

【讨论】：