[Testing] [Angular-cli] Can't resolve all parameters when TranslateService is required in injection

[Supamiu]

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior I can't run basic karma+Jasmine tests using angular-cli configuration. I get the following error:

Error: Can't resolve all parameters for I18nToolsService: (?).

And I18nToolsService's constructor is:

constructor(private translator: TranslateService) {
}

My test file is a simple test file :

describe('I18nToolsService', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                TranslateModule.forRoot()
            ],
            providers: [
                I18nToolsService
            ]
        });
    });

    it('should be created', inject([I18nToolsService], (service: I18nToolsService) => {
        expect(service).toBeTruthy();
    }));
});

Expected/desired behavior The tests should run fine, with no errors at startup.

Please tell us about your environment:

• ngx-translate version: 8.0.0

• Angular version: 4.3.6

• Karma version: 1.4.1

• Jasmine version: 2.5.2

• Angular cli version: 1.4.0

[wilgert]

You have to either add the real TranslateService or a mock to the providers key. See: https://angular.io/guide/testing#services-with-dependencies

[Supamiu]

Just tried, got the same error with this:

beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                TranslateModule.forRoot()
            ],
            providers: [
                I18nToolsService,
                TranslateService
            ]
        });
    });

[Supamiu]

Any updates on that? I really need to be able to test my app and at the moment this is the only thing I'm stuck with.

[sandangel]

I can not make it work too. I have followed the ionic example testing config for my angular app but it just not work:

import {DebugElement, Injector} from '@angular/core';
import {of} from 'rxjs/observable/of';
import {
  TranslateCompiler,
  TranslateFakeCompiler,
  TranslateLoader,
  TranslateModule,
  TranslateService,
} from '@ngx-translate/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from '@angular/router';
import {ListNavComponent} from './list-nav.component';
import {async, ComponentFixture, getTestBed, TestBed} from '@angular/core/testing';
import {MatListModule, MatIconModule} from '@angular/material';
describe('ListNavComponent', () => {
  let comp: ListNavComponent;
  let fixture: ComponentFixture<ListNavComponent>;
  let de: DebugElement;
  let el: HTMLElement;
  let translate: TranslateService;
  let injector: Injector;

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [ListNavComponent],
        imports: [
          MatListModule,
          CommonModule,
          RouterModule.forChild([]),
          MatIconModule,
          TranslateModule.forRoot({
            loader: {provide: TranslateLoader, useClass: FakeLoader},
            compiler: {provide: TranslateCompiler, useClass: TranslateFakeCompiler},
          }),
        ],
      }).compileComponents();

      injector = getTestBed();
      translate = injector.get(TranslateService);
      translate.use('en');

      fixture = TestBed.createComponent(ListNavComponent);

      comp = fixture.componentInstance;

      de = fixture.debugElement;
      el = de.nativeElement;
    }),
  );

  it('true is true', () => {
    expect(true).toBe(true);
  });
});

const translations: any = {LOAD: 'This is a test'};

class FakeLoader implements TranslateLoader {
  getTranslation(lang: string) {
    console.log(lang);
    return of(translations);
  }
}

ERROR:

[Lakston]

Same here, some input would be nice since testing is an important part of any serious app; please provide some documentation on testing, thanks !

[Supamiu]

any updates? Not being able to test the app just because of that is a bommer for my app, please write proper testing documentation if I'm missing anything, even with a TranslateService provided, nothing changed, I tried everything written in the doc.

[jfmaeck]

Are you importing the es7 reflect polyfill? If not, you could try if adding the following line to the polyfills.ts fixes your issues:

import 'core-js/es7/reflect'; // needed for unit testing

and you might also want to check you tsconfig.json file for "emitDecoratorMetadata": true,

[Albosonic]

Has anyone solved this yet? I have been banging my head on the key board for the last few hours.

[ocombe]

Have you looked at the example app? https://github.com/ngx-translate/example It includes a spec file that you can use as an example: https://github.com/ngx-translate/example/blob/master/src/app/app.component.spec.ts

[herin0506]

Still issue persist for unit testing parameterized API.

[PowerSupply]

Anyone? Having the same problem trying to set up testing with jest + jest-preset-angular.

[mrsalmanahmad]

i am facing the same problem anyone have found any solution yet ?

[julien-deramond]

I faced the same problem and fixed it this way.

1. Used this TranslateTestingModule : https://github.com/ngx-translate/core/issues/636#issuecomment-451137902
2. Modified the contructor of MyComponent (the tested component):

constructor(@Inject(TranslateService) public translate: TranslateService) {

3. Inside the test file:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      TranslateTestingModule
    ],
    declarations: [
      MyComponent
    ],
    providers:[
      TranslateService
    ]
  }).compileComponents();
}));

[italoiz]

I also had the same problem. I managed to solve by putting in tsconfig.spec.json from the root of the project the option emitDecoratorMetada as true.

My tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest", "node"],
    "emitDecoratorMetadata": true
  },
  "files": ["src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

[ryboucher]

@julien-deramond With Angular 9 and Ngx translate 12, the TranslateTestingModule does not seem to be working anymore. The TranslateModule is ignoring the declaration of the mocked pipe. Is anyone else experiencing this issue?

Note: If I turn Angular Ivy off, the module works.