CODEWITHSUNDEEP
angularngx-translate
zen zen
zen zen

Reputation: 11

Failed: this.translate.get is not a function (unit testing)

I have a unit test in angular and I am getting this error:

TypeError: this.translate.get is not a function
    at TranslatePipe.updateValue (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ngx-translate/core/__ivy_ngcc__/fesm2015/ngx-translate-core.js:1126:1)
    at TranslatePipe.transform (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ngx-translate/core/__ivy_ngcc__/fesm2015/ngx-translate-core.js:1167:1)
    at ɵɵpipeBind1 (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:22464:1)
    at LoginPageComponent_Template (ng:///LoginPageComponent.js:228:33)

How do I resolve this? I already added the TranslateModule.forRoot() on my imports but it did not work. Here's what my test looks like:

const mockTranslateService = jasmine.createSpyObj('TranslateService', ['use']);

beforeEach(() => {

    TestBed.configureTestingModule({
      declarations: [LoginModalComponent],
      imports: [
        CommonModule,
        BrowserModule,
        TranslateModule.forRoot(),
        ReactiveFormsModule,
        UpgradeModule,
      ],
      providers: [
        { provide: TranslateService, useValue: mockTranslateService },
        /*Other services here...*/
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(LoginModalComponent);
    component = fixture.componentInstance;
  });

I don't use the get method at all, but I do use the use method and in my html I use the translate pipe.

<span class="close-button">{{ 'COMMON.CLOSE' | translate }}</span>

Here's my component:

constructor(
    private myService: MyService,
    private translateService: TranslateService
  ) {}

ngOnInit(): void {
    const subscription = 
      this.myService.fetchLanguage().subscribe((info) => {
      this.translateService.use(info.language.toLowerCase());
    });

    this.subscriptions.push(subscription);
  }

Upvotes: -1

Views: 2234

Answers (3)

SW-Muriu
SW-Muriu

Reputation: 1

Here is how I got through the error, though I used jest. With the TranslateModule.forRoot() in your imports, eliminate the TranslateService from your providers. Instead, inject it in your TestBed as follows:

translateServiceMock = TestBed.inject(
    TranslateService
) as jest.Mocked<TranslateService>;

that is having defined the translateServiceMock globally in your spec file. This will work in your HTML files without issue. In case you need to test some translations in your component class, casting the injection as a jest.Mocked<> gives you access to its methods which you can spy on this way, in the test instance:

jest
    .spyOn(translateServiceMock, 'instant')
    .mockReturnValue('Test Data Required');

Upvotes: 0

RVital
RVital

Reputation: 1

I add the method get in my mock like this public get(key: string | Array) {}

and worked, I do have a file just for mock of methods in translate service

Upvotes: 0

31piy
31piy

Reputation: 23839

If you see the stack trace, you will know that the TranslatePipe uses the method get under the hood. I see that you are mocking the TranslateService

{ provide: TranslateService, useValue: mockTranslateService },

but you are not adding the get method while creating the mock. Please try adding the get method in the list of mocked functions:

const mockTranslateService = jasmine.createSpyObj('TranslateService', ['use', 'get']);

Upvotes: 2

Related Questions