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.

it's the ng2-translate https://github.com/ocombe/ng2-translate — user3518668, Sep 20 '16 at 15:32

score 52 · Answer 1 · answered Sep 20 '16 at 15:40

52

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.

answered Sep 20 '16 at 15:40

Paul Samsotha

205,037
37
486
720

1

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. – jpgrassi Oct 24 '16 at 13:54
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. – danday74 Jan 20 '17 at 11:32

Stephan Kristyn · Answer 2 · 2017-04-25T15:42:55.633

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
   ...

This is the solution I was looking for, but I just needed to add `{ provide: Http, useValue: true },` to `providers` — J.J., Jul 17 '17 at 13:17

score 0 · Answer 3 · answered Nov 29 '21 at 10:37

0

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

so it also helped me!

answered Nov 29 '21 at 10:37

Serhii

1

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](/help/how-to-answer). – Community Nov 29 '21 at 11:28

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

3 Answers3

Linked