JEST failure while upgrading angular v13: SyntaxError: Unexpected token 'export' #7844
Comments
|
it looks my global (jest.preset.js) transformIgnorePatterns got skipped with the following new addition to jest.config.js
|
|
I got a similar error, after upgrading to latest version;
|
|
I think the migration was not looking jest.preset.js file configuration. it was overriding global configuration. I have removed this setup and moved that into jest.preset.js global configuration file and it worked after that!. Now, I am running into one last issue, Jest has detected the following 2 open handles potentially keeping Jest from exiting: ● MESSAGEPORT I am not sure why I am getting this issue. |
|
Got exactly the same error with a new nx workspace generated with Though it wasn't with the latest version so I had to run the migrations. Running |
|
Did some more digging! It seems that migrating from an earlier workspace version bumps the version of some of the dependencies further than a fresh ex. latest: ex. Migrated workspace: |
|
It seems that it has less to do with the version of the dependencies. A migration step has gone wrong! To fix this you have to update your jest.config.js files in all your projects yourself. Here's an example of how it should look in a library project: |
|
Thanks for reporting this! Unfortunately, I couldn't reproduce the issue. I tried creating a new workspace using Nx v12.9.0 and then migrated it to the latest version. The migration was applied correctly to the project Could you maybe create a minimal repo where the reported behavior can be reproduced? A repo in an older version where running the migration doesn't apply the expected changes. FYI, the migration does the following:
|
leosvelperez
added
blocked: repro needed
scope: angular
|
I had a similar error, my jest.config.ts looked like this, and it had no changes after migration from 12 -> 13. Maybe having this original jest config helps with finding out what was going wrong. |
|
@dlq84 I added that exact configuration you shared to a project diff --git a/apps/client/jest.config.js b/apps/client/jest.config.js
index 4040c4f..6497f93 100644
--- a/apps/client/jest.config.js
+++ b/apps/client/jest.config.js
@@ -18,5 +18,8 @@ module.exports = {
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
],
- transform: { '^.+\\.(ts|js|html)$': 'jest-preset-angular' },
+ transform: {
+ '^.+.(ts|mjs|js|html)$': 'jest-preset-angular',
+ },
+ transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
}; |
|
A note on the migration: It's unfortunate you're having issues with the Jest setup. Unfortunately, the Angular 13 release broke compatibility with several tools (Jest among them) and this has caused a lot of trouble. As Victor explained in #7613 (comment), automatic migrations are hard, not every workspace is the same or evolves in the same way and to account for every possible variation is just impossible. We try our best to provide the best migration experience possible, but there can definitely be scenarios we might miss or simply deviate from what we generate or expect to be generated. For anyone coming to this particular issue, I described what the migration does in this comment #7844 (comment). I haven't been able to reproduce the issue you're having, so a minimal repo where the issue can be reproduced would help us to troubleshoot it. If you're facing the issue, you need to make sure that your projects module.exports = {
...
transform: { '^.+.(ts|mjs|js|html)$': 'jest-preset-angular' },
transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
...
}The gist of the change is that now Jest needs to process the |
is it truly jest.config or the root jest.preset ? To me it looks like something should be in the root. |
That's why I mentioned above every workspace is unique. You can have it in the root That's an example of a deviation of what we generate and what makes migrations to be hard. Nx workspaces can contain multiple technologies, therefore, we don't add configuration that might be Angular-specific at this point in time to the root configuration, we rather add it to the configuration of the Angular projects.
The |
After restoring all other jest.config file in all my libraries, I'm running in this same exact message when I run all my test with --detectOpenHandles Which wasn't there on v12. And I have no idea how this can be solved. |
|
Basically module.exports = {
displayName: "your-app-name-here",
preset: "../../jest.preset.js",
setupFilesAfterEnv: ["<rootDir>/src/test-setup.ts"],
globals: {
"ts-jest": {
tsconfig: "<rootDir>/tsconfig.spec.json",
stringifyContentPathRegex: "\\.(html|svg)$",
useESM: true
}
},
coverageDirectory: "../../coverage/apps/your-app-name-here",
moduleFileExtensions: ["ts", "html", "js", "json", "mjs"],
extensionsToTreatAsEsm: [".ts"],
resolver: "jest-preset-angular/build/resolvers/ng-jest-resolver.js",
transform: {
"^.+\\.(ts|js|mjs|html|svg)$": "jest-preset-angular",
},
transformIgnorePatterns: [
"node_modules/(?!.*\\.mjs$)"
],
snapshotSerializers: [
"jest-preset-angular/build/serializers/no-ng-attributes",
"jest-preset-angular/build/serializers/ng-snapshot",
"jest-preset-angular/build/serializers/html-comment",
],
};Hopefully this helps someone, but for me, the issue has not been solved. |
|
@sergiocarneiro Another problem here is that you are changing the resolver that is being used: The jest-preset-angular resolver does not work in Nx Workspaces because it does not transform the TSConfig Path Aliases for libraries. You need to remove that property and use the const nxPreset = require('@nrwl/jest/preset');
module.exports = { ...nxPreset };Then your standard module.exports = {
displayName: 'dashboard',
preset: '../../jest.preset.js',
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
globals: {
'ts-jest': {
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
},
},
coverageDirectory: '../../coverage/apps/dashboard',
transform: {
'^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
},
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
snapshotSerializers: [
'jest-preset-angular/build/serializers/no-ng-attributes',
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
],
}; |
|
@leosvelperez , the above PR is an example of migration that might help shed the light on some other issues that might be happening. Feel free to check it as a replication |
|
This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. |
|
Hi guys! I tried to follow every comment with a possible solution here to the letter. I relied on an example project on github as well which works perfectly. This also started to happen to me after updating everything manually. My jest.config.js inside apps/my-app: module.exports = {
preset: "../../jest.preset.js",
coverageDirectory: "../../coverage/apps/my-app",
moduleFileExtensions: ["ts", "html", "js", "json", "mjs"],
extensionsToTreatAsEsm: [".ts"],
resolver: "jest-preset-angular/build/resolvers/ng-jest-resolver.js",
setupFilesAfterEnv: ["<rootDir>/src/test-setup.ts"],
globals: {
"ts-jest": {
tsconfig: "<rootDir>/tsconfig.spec.json",
stringifyContentPathRegex: "\\.(html|svg)$",
useESM: true
}
},
transform: {
"^.+\\.(ts|js|mjs|html|svg)$": "jest-preset-angular",
},
displayName: "my-app",
snapshotSerializers: [
"jest-preset-angular/build/serializers/no-ng-attributes",
"jest-preset-angular/build/serializers/ng-snapshot",
"jest-preset-angular/build/serializers/html-comment",
],
transformIgnorePatterns: [
"node_modules/(?!.*\\.mjs$)",
"node_modules/(?!lodash-es)",
"node_modules/(?!@ngrx|@ionic-native|@ionic)"
]
};jest.config.js in the project root: const { getJestProjects } = require("@nrwl/jest");
module.exports = { projects: getJestProjects() };jest.preset.js in the root project: const nxPreset = require("@nrwl/jest/preset");
module.exports = {
...nxPreset,
testMatch: ["**/+(*.)+(spec|test).+(ts|js)?(x)"],
transform: {
"^.+\\.(ts|js|html)$": "ts-jest",
},
resolver: "@nrwl/jest/plugins/resolver",
moduleFileExtensions: ["ts", "js", "html"],
coverageReporters: ["html"],
};package.json: I still keep getting this error: :/ You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
C:\Repos\temp-repos\my-app\node_modules\@angular\core\fesm2015\testing.mjs:7
import { getDebugNode, RendererFactory2, ɵstringify, ɵReflectionCapabilities, Directive, Component, Pipe, NgModule, ɵgetInjectableDef, resolveForwardRef, ɵNG_COMP_DEF, ɵRender3NgModuleRef, ApplicationInitStatus, LOCALE_ID, ɵDEFAULT_LOCALE_ID, ɵsetLocaleId, ɵRender3ComponentFactory, ɵcompileComponent, ɵNG_DIR_DEF, ɵcompileDirective, ɵNG_PIPE_DEF, ɵcompilePipe, ɵNG_MOD_DEF, ɵtransitiveScopesFor, ɵpatchComponentDefWithScope, ɵNG_INJ_DEF, ɵcompileNgModuleDefs, NgZone, Compiler, COMPILER_OPTIONS, ɵNgModuleFactory, ModuleWithComponentFactories, InjectionToken, Injector, InjectFlags, ɵresetCompiledComponents, ɵflushModuleScopingQueueAsMuchAsPossible } from '@angular/core';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1728:14)Thansk for your replies. |
|
Is there any solution to this? |
|
@1antares1 See this section of your extensionsToTreatAsEsm: [".ts"],
resolver: "jest-preset-angular/build/resolvers/ng-jest-resolver.js",
setupFilesAfterEnv: ["<rootDir>/src/test-setup.ts"], If you can try to match the example config I gave in the above comment and see if that works for you :) |
|
Based on my previous response (#7844 (comment)), I'm going to close this issue. The workaround listed here #7844 (comment) should be valid. |
|
I did as suggested above. Have the test-setup.ts with the import and this is the lib jest config and yet it's the same error 🤷♂️ : |
|
@GeorgeKnap i had the same issue but i managed to fix it by making the transformIgnorePatterns an array containing a single string, rather an array of multiple strings |
Could you share an example please? I'm not good with these regular expressions that seems to be used there. |
Thanks for the tip @joewIST ! I changed: with: and the error was gone ! |
|
Confirmed! Error is gone when used just one line 🥳 |
|
This StackOverflow answer did it for me. I made a script to update all my |
|
if someone is still having issues, add |
|
I found that adding the rootDir makes the initial test runs very long for each test file. For me, the performacne was quicker, if I changed the transformIgnorePatters entry to a regex string: |
|
In my case, not only the |
|
had same issue when creating brand new nx project with angular 14. Looks like the jest config is set up correctly for apps, but are wrongly set for libraries generated with nx. I just copied the app config settings to the libraries as well and all works well now |
|
For what it's worth, I think a more efficient approach is to mock out the service all together such as in the test-setup.ts file. Then make an Angular wrapper service for the esm service. You can then mock out in your unit tests. Jest configs can then remain the same. |
thank youuu! this worked for me |
|
Just updating my node JS to version 16 or later solved my issue |
|
I attempted to implement your version of > NX Failed to run update-jest-preset-angular-8-4-0 from @nrwl/jest. This workspace is NOT up to date!
> NX Cannot find module '/Users/ldco2016/Projects/<project-name>/apps/<project-backend-name>/jest.config.js'These are my "@nrwl/angular": "14.7.0",
"@nrwl/cli": "14.7.0",
"@nrwl/eslint-plugin-nx": "14.7.0",
"@nrwl/jest": "14.7.0",
"@nrwl/linter": "14.7.0",
"@nrwl/nest": "14.7.0",
"@nrwl/node": "14.7.0",
"@nrwl/workspace": "14.7.0",I am on Node |
|
Hi If I run tests for "components" library I get this error. |
Esta funcioino para mi en NX |
|
If you are here and not Angular but React like me, check this one: #8323 |
|
I'm getting this error, import _async_to_generator from "@swc/helpers/src/_async_to_generator.mjs"; While building a nx-plugin |
|
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. |
and others
Most of my JEST unit test cases are failing with the recent upgrade.
Please see below error message and advise,
The text was updated successfully, but these errors were encountered: