Search code examples
angularunit-testingwarningsts-jest

Angular, Transloco, Jest Unit Testing Warning


I have an Angular project.

inputValidatorsParamMap: Map<string, ValidationParams> = new Map([
  [
    'noMoreThan100Symbols',
    {
      regex: /^.{0,100}$/,
      message: this.translocoService.translate('MAIN_LAYOUT.MAX_CHARACTER_COUNT', {
        count: 100,
      }),
    } as ValidationParams,
  ],
]);

As you can see here, I set count dynamically.

The code works fine. And I get expected output.

But when I run npx jest, there is a warning message

Warning message: Missing translation for 'enUS.MAIN_LAYOUT.MAX_CHARACTER_COUNT'

message: this.translocoService.translate('MAIN_LAYOUT.MAX_CHARACTER_COUNT', {

I do not use enUS and my browser language is not en-US But I do not think it is due to spec.ts. I have two languages 'en' and 'ru' My spec.ts looks like this:

import { HttpClientModule } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { TranslocoService } from '@ngneat/transloco';

import { TranslocoRootModule } from '../../../transloco-root.module';
import { MyModalComponent } from './my-modal.component';

describe('MyModalComponent', () => {
  let component: MyModalComponent;
  let fixture: ComponentFixture<MyModalComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientModule, TranslocoRootModule],
      declarations: [MyModalComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      providers: [NgbActiveModal, TranslocoService],
    });
    fixture = TestBed.createComponent(MyModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

How to fix this warning message?


Solution

  • The warning is logged due to the default setting for missingHandler.logMissingKey which defaults to true. You're importing the TranslocoRootModule which comes with defaults that are not intended for unit testing. There is a dedicated module meant for unit testing, TranslocoTestingModule, which loads the translations synchronously.

    Best would be to follow the guide on unit testing from the docs.