Angular unit test with Jest using CKEditor5

Question

In my Angular project I am trying to unit test (using Jest) a component using the CKEditor5 which is giving me the following error:

Unexpected value 'CKEditorModule2' imported by the module 'SharedModule'. Please add an @NgModule annotation

I am aware that Jest does not fully support ECMAScript modules, so in my config I added ckeditor:

"transformIgnorePatterns": [
  "/node_modules/(?!@ckeditor)/.+\\.js$"
],

This is the entire jest config in my package.json:

"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
  "<rootDir>/setupJest.ts"
],
"moduleNameMapper": {
  "^@core/(.*)": "<rootDir>/src/app/core/$1",
  "^@libs/(.*)": "<rootDir>/src/libs/$1",
  "^@shared/(.*)": "<rootDir>/src/app/shared/$1",
  "^@statemanagement/(.*)": "<rootDir>/src/app/statemanagement/$1",
  "^@assets/(.*)": "<rootDir>/src/assets/$1",
  "^~/(.*)": "<rootDir>/src/$1",
  "\\.(css|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
},
"testPathIgnorePatterns": [
  "<rootDir>/node_modules/",
  "<rootDir>/dist/"
],
"transformIgnorePatterns": [
  "/node_modules/(?!@ckeditor)/.+\\.js$"
],
"globals": {
  "ts-jest": {
    "tsconfig": "<rootDir>/tsconfig.spec.json",
    "stringifyContentPathRegex": "\\.html$"
  }
}

The CKEditor module is imported in a shared module which is then imported in my components module. I also import the shared module in my test.

import module in my shared module:

import { CKEditorModule } from "@ckeditor/ckeditor5-angular";

Test file

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

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        imports: [StateManagementModule, RouterTestingModule, SharedModule],
        declarations: [OrganisationWizardComponent],
        providers: [
          { provide: OrganisationFacade, useFactory: () => instance(mock(OrganisationFacade)) },
        ]
      })
        .compileComponents();
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(OrganisationWizardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

Answer 1

To mock modules, you can use MockModule from ng-mocks.

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

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        // ...
        imports: [
          // ...
          MockModule(CKEditorModule), // <-- a fix
          // ...
        ],
        // ...
      })
        .compileComponents();
    })
  );
});