The pipe 'translate' could not be found , angular2 component testing

Question

I am working on component testing with angular2. in my html template i use the translate pipe. This is the code of the test :

import { ComponentFixture, TestBed ,getTestBed} from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';
import { RightComponent } from './right.component';
import {TranslateService} from 'ng2-translate/ng2-translate';
import {Injector} from "@angular/core";
let comp:    RightComponent;
let fixture: ComponentFixture<RightComponent>;
let el:      DebugElement;
let translate: TranslateService;
let injector: Injector;

describe('testComponent', () => {

beforeEach(() => {
TestBed.configureTestingModule({
  declarations: [ RightComponent ]
});

 injector = getTestBed();
 translate = injector.get(TranslateService);
fixture = TestBed.createComponent(RightComponent);

comp = fixture.componentInstance; // BannerComponent test instance

// get title DebugElement by element name
el = fixture.debugElement.query(By.css('h2'));
});
it('should display original title', () => {
fixture.detectChanges(); // trigger data binding
expect(el.nativeElement.textContent).toContain('Liste des droits');
});

});

i got this error the the translate pipe is not known :

Error: Template parse errors:
The pipe 'translate' could not be found ("<h2>[ERROR ->]{{'RIGHT_TITLE' |      translate}}</h2>
<div class="table-responsive">
<table id="rightTableId" clas"): RightComponent@0:4
 The pipe 'translate' could not be found ("
  <table id="rightTableId" class="table table-striped">
     <tr>
         <th>[ERROR ->]{{'NAME_LABEL' | translate}}</th>
     </tr>
     <tr *ngFor="let right of rights">
 "): RightComponent@4:16
  The pipe 'translate' could not be found ("
     </tr>
     <tr *ngFor="let right of rights">
         <td>[ERROR ->]{{right.name | translate}}</td>
     </tr>
 </table>

How we resolve this problem ?

Thanks.

Shute

is it a custom pipe or translation service by angular2? – Hyrcania

it's the ng2-translate github.com/ocombe/ng2-translate – Shute

Answer 1

it's the ng2-translate github.com/ocombe/ng2-translate

You need to configure the TestBed with the library module just like you would configure the library with your real application. And looking at the documentation, it shows configuring it by importing the module

imports: [
  TranslateModule.forRoot()
]

So you should do the same in the TestBed configuration

TestBed.configureTestingModule({
  declarations: [ RightComponent ],
  imports: [TranslateModule.forRoot()]
});

This is what the TestBed.configureTestingModule is for: to configure a module for the test environment.

Bebop

This was killing me for hours. I was trying to test a component that uses the translate pipe. Tried importing the module without the .forRoot() and that did not work. – Cathicathie

this answer got me to the right answer. However, by importing my PipesModule into the test suite I was importing a load of pipes I didn't need which slowed down the test run. By importing only the specific pipe I needed into the declarations section I got the best solution. Thanks for the guidance here. – Enriquetaenriquez

Answer 2

With latest Angular 4 compatible ngx-translate you need to implement this directly into the component you want to test:

import {TranslateHttpLoader} from "@ngx-translate/http-loader";
import {Http, HttpModule} from "@angular/http";
import {
    MissingTranslationHandler,
    TranslateLoader,
    TranslateModule,
    TranslateService
} from "@ngx-translate/core";

...

export function HttpLoaderFactory(http: Http) {
    return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

   ...

   imports: [
                TranslateModule.forRoot({
                    loader: {
                        provide: TranslateLoader,
                        useFactory: HttpLoaderFactory,
                        deps: [Http]
                    }
                })
            ],
   ...

   providers: [
                TranslateService
   ...

Exedra

This is the solution I was looking for, but I just needed to add { provide: Http, useValue: true }, to providers – Mercurial

Answer 3

beforeEach(() => {
        TestBed.configureTestingModule({
          imports: [TranslateModule.forRoot()],
          declarations: [HeaderComponent],
          schemas: [CUSTOM_ELEMENTS_SCHEMA]
        }).compileComponents(); 
  });

so it also helped me!

Bilbao

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Omega

Answer 4

For completness, if you forget to put the Component that is tested to the declarations, it can also give the same error: "pipe '...' could not be found"

declarations: [ RightComponent ],

Tractate