Closed CoderIllusionist closed 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.
Changed "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points" to "postinstall": "ngcc" in package.json and voila, it worked!
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
"postinstall": "ngcc"
package.json
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:
// jest.config.js:
The actual Jest error:
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.