angularjestjsts-jest

Jest with Angular Test case failing with error from angular core TypeError: Cannot read properties of undefined (reading 'toLowerCase')


I am writing test cases for an angular application using Jest. My angular.json file already has

"test": {
          "builder": "@angular-builders/jest:run",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ]
          }
        }

and my jest.config.json already has

module.exports = {
  setupFilesAfterEnv: [
      './jest.setup.js'
  ],
  collectCoverage: true,
  verbose: true,
  transform: {
    '^.+\\.ts$': 'ts-jest',
  },
  moduleFileExtensions: ['ts', 'js', 'mjs', 'json', 'node'],
  testPathIgnorePatterns: ['perf-.+\\.spec\\.ts'],
}

and my jest.setup.js already has

const { TextEncoder, TextDecoder } = require('util');
import { registerLocaleData } from '@angular/common';
import localeEn from '@angular/common/locales/en';

global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
if (localeEn) {
    registerLocaleData(localeEn);
} else {
    throw new Error('Locale data is undefined.');
}

The code for my test case is really simple:

import { TestBed } from '@angular/core/testing'
import { ConfigurationService } from './configuration.service'

describe('ConfigurationService', () => {
  let service: ConfigurationService

  beforeEach(() => {
    TestBed.configureTestingModule({})
    service = TestBed.inject(ConfigurationService)
  })

  it('should be created', () => {
    expect(service).toBeTruthy()
  })
})

While running a test case using ng test, I get the following error.

at registerLocaleData (../../node_modules/@angular/core/fesm2022/core.mjs:22522:25)
      at registerLocaleData (../../node_modules/@angular/common/fesm2022/common.mjs:2562:12)
      at Object.<anonymous> (../../node_modules/@weald/src/app/app.module.ts:45:1)
      at Object.<anonymous> (../../node_modules/@weald/src/app/app-shared.module.ts:3:27)
      at Object.<anonymous> (../../node_modules/@weald/src/public_api.ts:3:15)
      at Object.<anonymous> (../../node_modules/@weald/src/weald-ui-core.ts:5:15)
      at Object.require (src/lib/configuration/configuration.service.ts:3:1)
      at Object.<anonymous> (src/lib/configuration/configuration.service.spec.ts:2:1)

If I go to (../../node_modules/@angular/core/fesm2022/core.mjs:22522:25) and add a console.log statement, I see LocaleId is: en typeof is: string

So, if the typeof is string, I am unable to troubleshoot more why .toLowerCase is causing an issue here.

Thanks


Solution

  • Try adding the second argument which is a string describing the language locale.

    registerLocaleData(localeNL, 'nl');
    

    or

    registerLocaleData(localeFr, 'fr-FR');