jest-preset-angular [Bug]: TypeError: configSet.processWithEsbuild is not a function

Version

13.1.1

Steps to reproduce

Setup an angular repository with jest.config.ts, not jest.config.js, jest-preset-angular, and a single test.

Expected behavior

The test runs

Actual behavior

TypeError: configSet.processWithEsbuild is not a function

Additional context

Upgrading to @angular-builders/jest 16.0.0-beta.0 I encountered an error TypeError: configSet.processWithEsbuild is not a function. (see https://github.com/just-jeb/angular-builders/issues/1354)

I got my best debugger out and searched for the origin of this bug. I think that jest-preset-angular (probably versions 12+) is incompatible with Jest Typescript configuration files such as jest.config.ts and setupTest.ts.

The reason is the following.

When jest, then ts-jest transforms one of these two files (jest.config.ts and setupTest.ts), it will instantiate TsJestTransformer and call _configsFor . Since no _cachedConfigSets exists, TsJestTransformer will create one.
Then jest moves to the Angular files. It properly transforms them with NgJestTransformer, which relies on super._configsFor to call the configuration. However, it expects that no configuration will exist and that this function will be called instead to set the configset to a NgJestConfig (that contains the attribute processWithEsbuild):

_createConfigSet(config) {
    return new ng_jest_config_1.NgJestConfig(config);
}

However, NgJestConfig is never created as there is already one item in _cachedConfigSets for the same configuration. Hence processWithEsbuild does not exist in the configSet and the line if (configSet.processWithEsbuild(filePath)) { will fail with the error TypeError: configSet.processWithEsbuild is not a function

Reverting both jest.config.ts and setupTest.ts to plain Javascript files solves the issue (reverting only jest.config.ts does not) and the tests runs normally. This makes it probable that using the private cache is not a reliable method to add new parameters. Turns out, [this line already acknowledges](https://github.com/thymikee/jest-preset-angular/blob/2ad157d4a3e9130a8913561a57ec5931ef3e0ec4/src/ng-jest-transformer.ts#LL53C5-L53C102) that using the cache is dangerous and could lead to some problems. I suppose we should find another way to provide the processWithEsbuild option in the configuration but I’ll leave it to the maintainers as I don’t know the ecosystem well enough to weigh in.

Environment

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M2
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  npmPackages:
    jest: ^29.3.1 => 29.5.0 

- @angular/core version: 16.0.1
- @angular-devkit/build-angular version: 16.0.2
- @angular-builders/jest: version: 16.0.0-beta.0
- @angular-builders/custom-webpack: version: 16.0.0-beta.0
- ts-jest 29.1.0
- jest-preset-angular 13.1.1

May 30 '23 17:05 flavianh

Hello,

I am facing the same issue right now. I have the same configuration as you have. any updates ?

Jun 01 '23 10:06 ghost

There is something with .ts files, but I am not sure if this is really jest-preset-angular issue. We have config.js (javaScrpit global config), so I can not say about that. But we are using setupTest.ts with no problems. Although since uplifting to v13+ we are not able to use TS snapshotSerializers (TypeError: configSet.processWithEsbuild is not a function) and with converting it to JS everything is working ok. ... But there is also a possibility that the problem is our TS file. 🤷