ckeditor / ckeditor5-angular

Official CKEditor 5 Angular 5+ component.
https://ckeditor.com/ckeditor-5
Other
202 stars 110 forks source link

CKEditorModule does not have a module def (ɵmod property) in Jest test #326

Closed CoderIllusionist closed 2 years ago

CoderIllusionist commented 2 years ago

We're upgrading from Angular v12 to v14 and most of the tests fail as the CKEditorModule, defined in our app.module does not have a emod property

// package.json:

  "dependencies": {
    "@angular/animations": "^14.0.6",
    "@angular/cdk": "~14.0.5",
    "@angular/common": "^14.0.6",
    "@angular/compiler": "^14.0.6",
    "@angular/core": "^14.0.6",
    "@angular/forms": "^14.0.6",
    "@angular/material": "~14.0.5",
    "@angular/material-moment-adapter": "~14.0.5",
    "@angular/platform-browser": "^14.0.6",
    "@angular/platform-browser-dynamic": "^14.0.6",
    "@angular/router": "^14.0.6",
    "@apollo/client": "^3.5.10",
    "@ckeditor/ckeditor5-angular": "4.0.0",
    "@ckeditor/ckeditor5-build-decoupled-document": "^34.2.0",
    "apollo-angular": "3.0.1",
    "file-saver": "^2.0.5",
    "graphql": "16.5.0",
    "keycloak-angular": "12.0.0",
    "keycloak-js": "18.0.1",
    "moment": "^2.29.3",
    "ngx-papaparse": "5.0.0",
    "object-sizeof": "^1.6.3",
    "rxjs": "~6.6.0",
    "tslib": "^2.4.0",
    "zone.js": "^0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.6",
    "@angular-eslint/builder": "14.0.2",
    "@angular-eslint/eslint-plugin": "14.0.2",
    "@angular-eslint/eslint-plugin-template": "14.0.2",
    "@angular-eslint/schematics": "14.0.2",
    "@angular-eslint/template-parser": "14.0.2",
    "@angular/cli": "^14.0.6",
    "@angular/compiler-cli": "^14.0.6",
    "@graphql-codegen/cli": "2.8.1",
    "@graphql-codegen/typescript": "^1.20.2",
    "@graphql-codegen/typescript-apollo-angular": "^2.3.0",
    "@graphql-codegen/typescript-operations": "^1.17.14",
    "@ngneat/spectator": "^8.3.2",
    "@schematics/angular": "^13.3.5",
    "@types/jest": "^28.1.6",
    "@types/node": "^16.11.45",
    "@typescript-eslint/eslint-plugin": "^5.29.0",
    "@typescript-eslint/parser": "^5.29.0",
    "babel-jest": "^28.1.3",
    "eslint": "^8.18.0",
    "eslint-plugin-import": "2.25.2",
    "eslint-plugin-jest": "^26.6.0",
    "eslint-plugin-jsdoc": "^37.9.1",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "jest": "^28.1.3",
    "jest-preset-angular": "^12.2.0",
    "ng-packagr": "^14.0.3",
    "postcss": "^8.4.13",
    "ts-jest": "^28.0.7",
    "ts-node": "^10.9.1",
    "typescript": "~4.6.4"
  }
}

// jest.config.js:

const { pathsToModuleNameMapper } = require('ts-jest');
const { paths } = require('./tsconfig.json').compilerOptions;
const esModules = ['@ckeditor', 'lodash-es'].join('|');

globalThis.ngJest = {
  skipNgcc: false,
  experimentalPrecompilation: true,
  tsconfig: 'tsconfig.spec.json',
};

module.exports = {
    moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
    preset: 'jest-preset-angular',
    roots: ['<rootDir>/src/'],
    testMatch: ['**/+(*.)+(spec).+(ts)'],
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
    collectCoverage: false,
    coverageReporters: ['html', 'text'],
    coverageDirectory: 'coverage/my-app',
    moduleNameMapper: pathsToModuleNameMapper(paths || {}, {
        prefix: '<rootDir>/',
        '^~/(.*)': '<rootDir>/src/$1',
        '\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
    }),
    transformIgnorePatterns: [`/node_modules/(?!.*\\.mjs$|${esModules})`],
    transform: {
    'node_modules[\\\\/]@ckeditor.+\\.(js)$': 'babel-jest',
    '^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
    },
    testPathIgnorePatterns: ['/node_modules/', '/cypress/', '/dist/', '/e2e/', '/k8s/'],
    globals: {
        'ts-jest': {
            isolatedModules: true,
            allowSyntheticDefaultImports: true,
        },
    },
};

The actual Jest error:

    CKEditorModule does not have a module def (ɵmod property)

      218 |         jest.spyOn(console, 'debug').mockImplementation(() => { });
      219 |
    > 220 |         await TestBed.configureTestingModule({
          |                       ^
      221 |             imports: [
      222 |                 RouterTestingModule,
      223 |                 ApolloTestingModule,

Issue #https://github.com/ckeditor/ckeditor5-angular/issues/295 and #https://github.com/ckeditor/ckeditor5-angular/issues/312 does not seem to fix it for us.

CoderIllusionist commented 2 years ago

Changed "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points" to "postinstall": "ngcc" in package.json and voila, it worked!