6

After I migrated to Angular 13 and Jest 28 my tests stopped working. I am getting this kind of error:

Test suite failed to run

    TypeError: configSet.processWithEsbuild is not a function

    > 1 | import { ChangeDetectionStrategy, Component, ChangeDetectorRef, OnChanges, SimpleChanges, OnInit, Input } from '@angular/core';

marking red i letter of import

Any idea on how to fix it?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Vytautas Pranskunas
  • 772
  • 12
  • 23

3 Answers3

12

In Jest config, in section transform change value ts-jest to jest-preset-angular

i.e. before:

  transform: {
    '^.+\\.(ts|js|html)$': 'ts-jest'
  },

after

  transform: {
    '^.+\\.(ts|js|html)$': 'jest-preset-angular'
  },
Michal Minich
  • 2,387
  • 1
  • 22
  • 30
2

Hi hope you're doing good !

Regardless of the issue you're facing using Angular, I would always recommend you to send a screenshot from angular version within the issue, in order to see if the version being used is part of the problem or not, running: ng version will do the trick.

enter image description here

On the other hand, I've been facing the same issue and after some hours invested found the possible solution for you.

As you might now Angular 13 introduces ESM package format for Angular packages, which needs a new configuration.

What worked for me:

// jest.config.js

Added the following:

const esModules = ['@angular', '@ngrx', ...]; // Packages using a different format

module.exports = {
 ......
  extensionsToTreatAsEsm: ['.ts'],
  // A set of global variables that need to be available in all test environments
  globals: {
    'ts-jest': {
      useESM: true,
      stringifyContentPathRegex: '\\.(html|svg)$',
      tsconfig: '<rootDir>/tsconfig.spec.json',
    },
  },
  // An array of file extensions your modules use
  moduleFileExtensions: ['ts', 'js', 'html', 'svg', 'json', 'mjs'],
  // A map from regular expressions to module names that allow to stub out resources with a single module
  moduleNameMapper: {'^(\\.{1,2}/.*)\\.js$': '$1'},
  // The paths to modules that run some code to configure or set up the testing environment before each test
  setupFilesAfterEnv: ['<rootDir>/setupJest.ts'],
  // A map from regular expressions to paths to transformers
  transform: { '^.+\\.(ts|tsx|js|html|svg|mjs)$': 'jest-preset-angular'},
  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
  transformIgnorePatterns: [`<rootDir>/node_modules/(?!.*\\.mjs$|${esModules.join('|')})`],
 .....
}

// tsconfig.json


{
  ...
  "skipLibCheck": true,
  ...
}

NOTES:

  • Don't know if you already followed the migration steps from Jest v28, but there are some changes in the way tests are being structured.
  • In case you're using jest-angular-preset which I think you might being using the describe the migration process as well - Migration Steps
  • If you are using an E2E tool like Cypress and you have migrated it to Cypress v10 and Jest v28 be careful with the Chai library, there might be some configuration needed (not related to this issue, though).
  • In case you have eslint-loader npm package, check if it is required on your project, seems like newest versions of angular (v13 and v14) don't need it anymore.

Hope this information helps!

Best Regards

horacioesco
  • 606
  • 6
  • 7
0

use import 'jest-preset-angular'; instead of import 'jest-preset-angular/setup-jest';

Srinivasulu Gorthala
  • 1
  • I am importing exactly how you say. But it is not helping. – Vytautas Pranskunas Jun 13 '22 at 08:45
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 14 '22 at 08:01