Jest config ignored since upgrading to 27

Issue

I'm trying to migrate an NX monorepo from Angular 12 to Angular 13. As part of this migration, Jest is also updated to version 27.2.3. the project is also using a custom editor build of CKEditor5.

When CKEditor was first integrated (back when the project was using Angular 9 I believe) we had a lot of issues getting it to work with Jest and whenever the unit tests were ran, any component that included CKEditor was giving the error message:

SyntaxError: Cannot use import statement outside a module

We managed to fix the issue by adding the following configuration to the global jest.preset.js file in the root of the project:

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

However, now that we are migrating from Angular 12 to 13, the above error message has returned and it seems the above config is now ignored.

As part of the migration, NX has automatically created new project.json files in all of the libs in the monorepo. This file contains some Jest configuration so I have tried moving the config above from the jest.preset.js file to the individual project.json files in any lib using CKEditor, but this has not fixed the issue. The new project.json files also read some Jest config from a project-specific jest.config.js so I have tried adding the config there as well, and that has also not fixed the issue.

I have also tried updating the testEnviroment config in package.json from "node" to "jsdom" and this has not helped either. I also tried moving the whole transform/transformIgnorePatterns config to Jest section of package.json and that also did not help.

I assume my previously working config just need to move to a different file, it is just not clear which file it needs to move to.

My environment is as follows:

Windows 10

Node 16.13.2

NPM 8.1.2

NX 13.4.5

Jest 27.2.3

Angular 13.1.2

Solution

This was fixed by adding the following config to the Jest preset file, and removing same config from individual apps/libs configs:

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

Problem was related to having multiple strinfs inside transformIgnorePatterns - it supports only one item despite being an array

Answered By - danwellman