nx: JEST failure while upgrading angular v13: SyntaxError: Unexpected token 'export'
Most of my JEST unit test cases are failing with the recent upgrade.
Please see below error message and advise,
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
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:
node_modules/d3-selection/src/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export {default as create} from "./create.js";
^^^^^^
SyntaxError: Unexpected token 'export'
> 1 | import { Selection, select } from 'd3-selection';
| ^
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 28
- Comments: 56 (16 by maintainers)
I got a similar error, after upgrading to latest version;
transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],is not working for me thoughit looks my global (jest.preset.js) transformIgnorePatterns got skipped with the following new addition to jest.config.js
transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],Thanks for the tip @joewIST ! There seems to be a bug with
transformIgnorePatternscontaining multiple entries (or am I misunderstanding the rule ?)I changed:
with:
and the error was gone !
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 https://github.com/nrwl/nx/issues/7613#issue-1044939980, 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 https://github.com/nrwl/nx/issues/7844#issuecomment-977806286. 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
jest.config.jshave these two properties with the following values:The gist of the change is that now Jest needs to process the
.mjsfiles.@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
In my case, not only the
.mjsfiles were generating an error. Hence, this injest.config.tsfile fixed the problem:@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
jest.preset.jsthat Nx generates for you at the workspace root, which is:Then your standard
jest.config.jsthat lives within your app or library directory should look similar to this:Confirmed! Error is gone when used just one line 🥳
Is there any solution to this?
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:
jest.config.js in the project root:
jest.preset.js in the root project:
package.json:
I still keep getting this error: 😕
Thansk for your replies.
@dlq84 I added that exact configuration you shared to a project
jest.config.jsin a v12.9.0 workspace, ran the migrations and got the expected result:It seems that it has less to do with the version of the dependencies. I’ts like @dean-g pointed out. The global jest.config.js has been altered during migration, but the the projects in the workspace have not had their jest.config.js altered with the new
transformIgnorePatternsandtransformconfigurations.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:
Been fixing it on Friday evening actually with a Nx Repository, coming from NG12
So I have one app within apps folder and several libs, all the tests coming from the libs were failing … After a lot of digging, I had to add a test-setup.ts at the the root of the lib, next to index.ts within the folder structure.
In this test-setup, this line made the trick :
import 'jest-preset-angular/setup-jest';Then in the jest.config.js :
You’ll notice I had to avoid some special packages such as ngx-translate, ngx-webstorage … this is documented on the jest-preset for angular within the docs.
After all of that, I made it working, hope this helps you guys
I’ve created a minimal repo with
lodash-esand@datorama/akitaat https://github.com/synec/ng13-jest-failOn commit bffa49da40b05f17efc8df0e70b596c34ba2785b the test fails because of
lodash-es. This is fixed in commit c27cb9371dc1e729fc500ee31a5e87221ec8d517 by addingto the app
jest.config.jsCommit 971d782af5e9c43c797ed6860e076c7b20758ec5 adds a minimal Akita store and test fails again.
jest-preset-angularv11 describes a few changes that need to be performed:Basically
test-setup.tsbecomes this:Hopefully this helps someone, but for me, the issue has not been solved.
if someone is still having issues, add
<rootDir>at the beginning of transformIgnorePatterns path, especially jest.config.js files inside libs, if the lib generator doesn’t add it. e.g.This StackOverflow answer did it for me. I made a script to update all my
jest.config.jsfiles, I’ll leave it here since it can be useful for someone. Note that you also have to update the dependencies, as stated in the answer.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.
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 🤷♂️ :
@1antares1 migrating from 12 -> 14 will be especially difficult because of 13.
Instead of doing it manually, can you try run
nx migrate latestnpm installoryarndepending on your package managernx migrate --run-migrationsThat’s why I mentioned above every workspace is unique. You can have it in the root
jest.preset.jsand it will apply to every otherjest.config.jsthat uses the preset (if it’s not overwriting the config).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
transformIgnorePatternsproperty expects an array, you can pass multiple patterns to it. The pattern required to support Angular 13 is'node_modules/(?!.*.mjs$)'. Besides that one you can have others you need.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.
I’m getting this error,
import _async_to_generator from “@swc/helpers/src/_async_to_generator.mjs”; ^^^^^^ SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:360:18) at wrapSafe (node:internal/modules/cjs/loader:1094:15) at Module._compile (node:internal/modules/cjs/loader:1129:27) at Module._compile (/Users/symplrr/Desktop/Projects/Backend/zonocloud-monorepo/node_modules/pirates/lib/index.js:136:24) at Module._extensions…js (node:internal/modules/cjs/loader:1219:10) at Object.newLoader [as .ts] (/Users/symplrr/Desktop/Projects/Backend/zonocloud-monorepo/node_modules/pirates/lib/index.js:141:7) at Module.load (node:internal/modules/cjs/loader:1043:32) at Function.Module._load (node:internal/modules/cjs/loader:878:12) at Module.require (node:internal/modules/cjs/loader:1067:19) at require (node:internal/modules/cjs/helpers:103:18)
While building a nx-plugin
@synec I was able to reproduce that issue in a non-Nx Workspace (
ng newworkspace). It’s not a specific issue to Nx, however, I’ll investigate and consult with the team to see if we can think of a solution@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
Got exactly the same error with a new nx workspace generated with
npx create-nx-workspaceThough it wasn’t with the latest version so I had to run the migrations.
Running
npx create-nx-workspace@latestseems to have working tests with jest!