Running jest in angular13: Unexpected value 'TranslateModule' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation

Question

I have tests from an angular 12 project that work just fine. I've upgraded the project to angular 13 and now they don't work.

This is my test file:

import { Component } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { GlobalTestingUtilities } from './global-testing-utilities';

@Component({
  template: `
    <div id="test-div-with-click-event-id"
     class="test-div-with-click-event-class"
     (click)="onTestDivClick()">
    </div>
  `
})
class ButtonClickTestComponent {
   public onTestDivClick(): void {}
}

describe('GlobalUtilities', () => {
  let component: ButtonClickTestComponent;
  let fixture: ComponentFixture<ButtonClickTestComponent>;
  let testTranslateService: TranslateService;
  const globalTestingUtilitesInstance = new GlobalTestingUtilities();

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

  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ButtonClickTestComponent);
    testTranslateService = TestBed.inject(TranslateService);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  afterEach(() => {
    fixture && fixture.destroy();
  });

  test('should create', () => {
    expect(globalTestingUtilitesInstance).toBeTruthy();
  });

But I get this error:

Unexpected value 'TranslateModule' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.

  34 |
  35 |   beforeEach(() => {
> 36 |     fixture = TestBed.createComponent(ButtonClickTestComponent);
     |                       ^
  37 |     testTranslateService = TestBed.inject(TranslateService);
  38 |     component = fixture.componentInstance;
  39 |     fixture.detectChanges();

It seems to be correctly written to me, so I don't know what's wrong. I'm using:

• "jest": "^27.4.7",
• "jest-canvas-mock": "^2.3.1",
• "jest-preset-angular": "^11.1.0"

setup-jest.ts:

import 'jest-preset-angular/setup-jest';
import 'jest-canvas-mock'

and jest setup in package.json:

"jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setup-jest.ts"
    ],
    "testTimeout": 10000,
    "collectCoverage": true,
    "collectCoverageFrom": [
      "<rootDir>/src/**/*.ts",
      "!<rootDir>/src/**/*.interface.ts",
      "!<rootDir>/src/**/*.spec.ts"
    ],
    "coverageReporters": [
      "text-summary"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 50,
        "functions": 50,
        "lines": 50,
        "statements": 50
      }
    }
  },

ETA: Here's the full stack trace:

 at verifySemanticsOfNgModuleDef (node_modules/@angular/core/fesm2015/core.mjs:23854:19)
 at node_modules/@angular/core/fesm2015/core.mjs:23865:9
     at Array.forEach (<anonymous>)
 at verifySemanticsOfNgModuleDef (node_modules/@angular/core/fesm2015/core.mjs:23863:60)
 at Function.get (node_modules/@angular/core/fesm2015/core.mjs:23825:21)
 at R3TestBedCompiler.applyProviderOverridesToModule (node_modules/@angular/core/fesm2015/testing.mjs:1066:29)
 at R3TestBedCompiler.compileTestModule (node_modules/@angular/core/fesm2015/testing.mjs:1314:14)
 at R3TestBedCompiler.finalize (node_modules/@angular/core/fesm2015/testing.mjs:920:14)
 at TestBedRender3.get testModuleRef [as testModuleRef] (node_modules/@angular/core/fesm2015/testing.mjs:1795:49)
 at TestBedRender3.inject (node_modules/@angular/core/fesm2015/testing.mjs:1718:29)
 at TestBedRender3.createComponent (node_modules/@angular/core/fesm2015/testing.mjs:1758:44)
 at Function.createComponent (node_modules/@angular/core/fesm2015/testing.mjs:1616:37)
 at src/app/global-classes/global-testing-utilities.spec.ts:36:23
 at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
 at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
 at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
 at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
 at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4250:34)

Answer 1

I got the same issue. I was missing the below config in jest.config.js file.

globalSetup: 'jest-preset-angular/global-setup'

Answer 2

I thought maybe the version of @ngx-translate/core might be a problem, and it was. We were using 13.0.0 for our angular 12 project, but I moved it up to 14.0.0 and now my tests pass.