Cannot run unit tests after upgrade from Angular 12 to 13

Current Behavior

Currently, running any unit test for a component that includes CKEditor5 fails with the message:

SyntaxError: Cannot use import statement outside a module

I know why this is happening - the CKEditor package imports one of its own dependencies using an import statement.

In previous versions of Angular/NX, this same issue was fixed by adding the following small piece of config to the jest.preset.js file:

transform: {
    'node_modules[\\\\/]@ckeditor.+.(js)$': 'babel-jest',
    '^.+.(ts|html)$': 'ts-jest',
  },
  transformIgnorePatterns: ['/node_modules/(?!@ckeditor|lodash).+.(js|jsx|ts|tsx|svg)$'],

However, it appears that this config is no longer used or is for some reason ignored now.

After running nx format I now have individual project.json files in all of my lib folders. I have tried adding the above config to this new file but it has not made any difference. I also tried setting "testEnvironment": "jsdom" in this file also and that made no difference.

Also inside each of my lib folders is a jest.config.js file (which is read by the project,json file), so I have tried adding the above config, as well as the testEnvironment setting there as well. This has also not fixed the issue.

It’s frustrating because I know what config is needed, I just don’t know where to put it. It’s very difficult when so may things change at once nx version, Angular version, Jest version…

Expected Behavior

Unit tests to work as they did in Angular 12

Steps to Reproduce

Reproduction is not easy due to CKEditor integration 😕

Environment

Windows 10

Output of nx report:

NX Report complete - copy this into the issue template

Node : 16.13.2 OS : win32 x64 npm : 8.1.2

nx : 10.4.15 @nrwl/angular : 13.4.5 @nrwl/cli : 13.4.5 @nrwl/cypress : 13.4.5 @nrwl/devkit : 13.4.5 @nrwl/eslint-plugin-nx : 13.4.5 @nrwl/express : undefined @nrwl/jest : 13.4.5 @nrwl/linter : 13.4.5 @nrwl/nest : undefined @nrwl/next : undefined @nrwl/node : undefined @nrwl/nx-cloud : undefined @nrwl/react : undefined @nrwl/react-native : undefined @nrwl/schematics : undefined @nrwl/tao : 13.4.5 @nrwl/web : undefined @nrwl/workspace : 13.4.5 @nrwl/storybook : 13.4.5 @nrwl/gatsby : undefined typescript : 4.5.4 rxjs : 6.5.5

Community plugins: @angular/animations: 13.1.2 @angular/cdk: 13.1.2 @angular/common: 13.1.2 @angular/compiler: 13.1.2 @angular/core: 13.1.2 @angular/forms: 13.1.2 @angular/material: 13.1.2 @angular/material-moment-adapter: 12.2.0 @angular/platform-browser: 13.1.2 @angular/platform-browser-dynamic: 13.1.2 @angular/router: 13.1.2 @fortawesome/angular-fontawesome: 0.9.0 @ngneat/transloco: 2.23.5 @ngrx/component-store: 13.0.2 @angular-devkit/build-angular: 13.1.3 @angular/cli: 13.1.3 @angular/compiler-cli: 13.1.2 @angular/language-service: 13.1.2

(node:28556) [DEP0148] DeprecationWarning: Use of deprecated folder mapping “./” in the “exports” field module resolution of the package at C:\repos\ucase\node_modules\tslib\package.json. Update this package.json to use a subpath pattern like “./*”. (Use node --trace-deprecation ... to show where the warning was created)

[danwellman]

Hi @Coly010 thanks, I think that has fixed it 👍

I’ve added this config to my global jest.preset.js file:

transform: {
    'node_modules[\\\\/]@ckeditor.+\\.(js)$': 'babel-jest',
    '^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
  },
  transformIgnorePatterns: ['node_modules/(?!.*.mjs$|@ckeditor)'],

And removed the transform / transformIgnorePatterns config from the individual libs’/apps’ jest.config.js files and the few tests I’ve tried are now working.

[Coly010]

Hi! Can you try the suggestion listed here: https://github.com/nrwl/nx/issues/7844#issuecomment-1016624608