Angular 2 Unit Test: Custom Pipe error The pipe could not be found

Question

I have a custom pipe called 'myPipe'. I am getting:

The pipe 'myPipe' could not be found error

in my unit test ts. Pleas advice what to import and declare in my .spec.ts

Here is my .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();
  });
});

Thanks!

you're talking about `myPipe` but your test is related to a `CarouselComponent`? you shouldn't import `myPipe` instead? — Elmer Dantas, Jan 09 '17 at 08:03
Check also this "pipe not found" entry: http://stackoverflow.com/questions/39007130/the-pipe-could-not-be-found-angular2-custom-pipe/40770507#40770507 — Karl, Jan 09 '17 at 08:14

score 153 · Answer 1 · edited Mar 31 '21 at 09:02

153

You should be able to do this:

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

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

edited Mar 31 '21 at 09:02

Roy

7,811
4
24
47

answered Aug 03 '17 at 17:13

JonesCola

1,646
1
11
13

1

How can we declare it at root module? so that no need to declare in each spec file – prabhatojha Jan 09 '19 at 11:06
8

I was confused b/c I imported the pipe into my testbed module as a provider, which would be correct if it was injected into the tsc component. However, b/c I was using it in an html file, the pipe had to imported as a declaration. – Dr. Hilarius Apr 24 '19 at 20:35
2

@jonuojha, did you ever find a way to declare custom pipes globally for test specs? – iain Jun 14 '19 at 15:21

maia · Answer 2 · 2017-06-12T22:35:19.117

I had the same problem, and fixed it by adding the following "mock pipe" to my spec.ts:

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

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

Then you have to add MockPipe to the TestBed configureTestingModule declarations:

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

score 8 · Answer 3 · edited Jan 26 '21 at 12:53

8

I had almost the same pipe issue; in cases of template parse errors, you need to take two steps:

Import the required pipe at the start like:

import {{ your_pipe_name }} from '../your/pipe/location';
Add it to your declaration:

TestBed.configureTestingModule({ declarations: [ your_pipe ] });

Happy Coding!

edited Jan 26 '21 at 12:53

Adrian Mole

49,934
160
51
83

answered Mar 24 '20 at 16:59

Abhishek Thakur

379
1
3
9

score 4 · Answer 4 · answered Dec 15 '21 at 17:04

It looks like you aliased/named your pipe but no one is answering based on this. For example, if your pipe is named myCustomPipe but this is different than the class name for the pipe:

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

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

then in your spec.ts file you can import your pipe as follows or it will not be found:

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

and in your beforeEach() you need to reference the alias as both a declaration and a provider:

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

    // etc
});

score -1 · Answer 5 · answered Jan 09 '17 at 08:07

you should start something like

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();
  });
});

Angular 2 Unit Test: Custom Pipe error The pipe could not be found

5 Answers5

Linked