Cannot run unit tests after upgrade from Angular 12 to 13

[danwellman]

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)

[bahizi]

Had this issue a while back and resolved it by doing the following:

• install jest-preset-angular@11.0.1 (11.1.0 was recently released and while I haven't tried it yet, I think it would work fine too)
• Update your angular apps & libs jest.config.js to include (important to include *.mjs files in transformIgnorePatterns)

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

Reference: https://thymikee.github.io/jest-preset-angular/docs/11.0/guides/angular-13+

[danwellman]

Thanks @bahizi, some of my libs'/apps' did already have this config in them, which I guess came from the NX migration, or nx format commands. Unfortunately the issue is not resolved.

I've updated one of the lib's that uses CKEditor with the following config:

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

Now, the error about CKEditor has gone away, but now I get a very similar error for one of the Angular core files: C:\repos\ucase\node_modules\@angular\core\fesm2015\testing.mjs - basically the error is the same as before, it's just a different file now

SyntaxError: Cannot use import statement outside a module

I've tried updating to latest Angular release (13.2.0) also but this has not helped.

[Coly010]

Hi! Can you try the suggestion listed here: #7844 (comment)

[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]

@danwellman Awesome! Yes unfortunately with Angular 13's switch to ESM, it makes it more of manual effort to support third party packages.

We'll keep an eye on Jest ESM support, but for now there isn't much more we can do.

I'm going to close this issue as you've managed to get unblocked :)

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.