TypeError: configSet.processWithEsbuild is not a function

Question

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?

Answer 1

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'
  },

Answer 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.

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