Jest: Unexpected value 'NgxsRootModule' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation

Question

I'm getting the following error when running a test in Jest, using Angular 13:

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

      41 |
      42 |   beforeEach(() => {
    > 43 |     fixture = TestBed.createComponent(MyComponent);

which appears to be related to this beforeEach block that I have:

beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        imports: [
          FormComponentsModule,
          MatButtonModule,
          NoopAnimationsModule,
          ReactiveFormsModule,
          RouterTestingModule,
          MatSnackBarModule,
          MatIconModule,
          MatCardModule,
          NgxsModule.forRoot([])
        ],
        declarations: [MyComponent],
        schemas: [NO_ERRORS_SCHEMA],
        teardown: { destroyAfterEach: false }
      }).compileComponents();
    })
  );

But if I remove the forRoot([]) part it then just compains about NgxsModule in the same way.

This also works fine with Angular 11 & 12. It's only since upgrading to Angular 13 (which required upgrades of Jest to the latest version) that this problem has appeared.

Does anyone have any ideas as to why it now doesn't like the use NgxsRootModule?

Answer 1

First, you should update the jest-preset-angular plugin to the latest version.

After that in your ‘jest.config.js’ file, you need to have the line: globalSetup: 'jest-preset-angular/global-setup'

// jest.config.js
module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  globalSetup: 'jest-preset-angular/global-setup'
};

Read more: https://thymikee.github.io/jest-preset-angular/docs/guides/angular-13+/