@nrwl/node library babel jest setting does not work #6782

WonderPanda · 2021-08-20T00:48:47Z

Current Behavior

After scaffolding a brand new node library using @nrwl/node and selecting the babelJest option tests do not run for the generated library.

Expected Behavior

Tests should be able to run in a new project

Steps to Reproduce

Generate a new NX workspace
Add the @nrwl/node package
Generate a node library choosing the babelJest option, eg:

npm run nx generate @nrwl/node:library -- --name=babel-test
--buildable
--importPath=@some-org/babel-test
--publishable
--standaloneConfig
--strict
--no-interactive
--babelJest

Run tests for the newly create library npm run test babel-test:test
Observe that the tests fail to run

Failure Logs

FAIL   babel-test  packages/babel-test/src/lib/babel-test.spec.ts
● 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.
 • 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:

/home/jesse/code/deepkit-community/modules/packages/babel-test/src/lib/babel-test.spec.ts:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { babelTest } from './babel-test';
                                                                                  ^^^^^^

SyntaxError: Cannot use import statement outside a module

  at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1479:14)
  at TestScheduler.scheduleTests (../../node_modules/@jest/core/build/TestScheduler.js:333:13)

Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.218 s

Environment

Node : 14.15.4
  OS   : linux x64
  npm  : 6.14.14
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 12.7.2
  @nrwl/cypress : Not Found
  @nrwl/devkit : 12.7.2
  @nrwl/eslint-plugin-nx : 12.7.2
  @nrwl/express : Not Found
  @nrwl/jest : 12.7.2
  @nrwl/linter : 12.7.2
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : 12.7.2
  @nrwl/nx-cloud : 12.3.10
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.7.2
  @nrwl/web : Not Found
  @nrwl/workspace : 12.7.2
  @nrwl/storybook : Not Found
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

The text was updated successfully, but these errors were encountered:

smo043 · 2021-09-11T00:38:35Z

Any updates? I am also facing the same error.

smo043 · 2021-09-17T01:44:03Z

Any help will be appreciated

the-ult · 2021-11-09T19:09:57Z

Same (kind of) issue after migrating to Angular 13 with: nx migrate @nrwl/workspace@next

 FAIL   ddm-ui  packages/ddm/ui/src/lib/pipes/first-letter/first-letter.pipe.spec.ts
  ● 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/@angular/core/fesm2015/testing.mjs:7
    import * as i0 from '@angular/core';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1728:14)

>  NX  Report complete - copy this into the issue template

  Node : 16.13.0
  OS   : darwin x64
  npm  : 8.1.0
  
  nx : 13.2.0-beta.1
  @nrwl/angular : 13.2.0-beta.1
  @nrwl/cli : 13.2.0-beta.1
  @nrwl/cypress : 13.2.0-beta.1
  @nrwl/devkit : 13.1.3
  @nrwl/eslint-plugin-nx : 13.2.0-beta.1
  @nrwl/express : Not Found
  @nrwl/jest : 13.2.0-beta.1
  @nrwl/linter : 13.2.0-beta.1
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/nx-cloud : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 13.2.0-beta.1
  @nrwl/web : Not Found
  @nrwl/workspace : 13.2.0-beta.1
  @nrwl/storybook : 13.2.0-beta.1
  @nrwl/gatsby : Not Found
  typescript : 4.4.4

barbados-clemens · 2021-11-12T22:15:12Z

Just came across this myself while doing some internal nx testing. I'll try to take a look at this here soon.
Unsure where the problem resides right now but my guess is some config not lining up as expected.

Oddly enough running the tests via Webstorm seem to work? (noticed by @nartc) but when running the same test via jest in the command line throws the error.

WkMac-NoaQX0xX.1112.mp4

barbados-clemens · 2021-11-18T15:47:29Z

looking more into this, you'll need to have @nrwl/web installed if you don't already as this is where the babel preset is coming from. @nrwl/web/babel as seen in the .babelrc file

{
  "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
}

but it looks like .babelrc isn't being picked up when running tests via nx or jest. unless you run jest directly in the root of the library in question in which case it sees the .babelrc and the transforms run as expected. this is why it works in Webstorm as the current working directory is set to the specific library but not in nx or via jest in the root.

Side Note: this looks to be only with buildable/publishable libraries, as I did not see the issue with only babel-jest enabled when generating a node library.

I'll keep looking into this.

Edit:
potentially related issue jestjs/jest#10647

barbados-clemens · 2021-11-18T21:12:11Z

@WonderPanda @smo043 @the-ult
Looks like adding a babel.config.json at the root of the repo with the content

{
  "babelrcRoots": ["*"]
}

fixes the issue.

I'll need to update the generators to make sure they add this file when creating a node library.

so summarize,
You need @nrwl/web installed in the project and to create a root babel.config.json with the contents above.
Hopefully, this will get things working for y'all in the meantime while this change is made to nx.

WonderPanda · 2021-11-18T22:14:19Z

Cool, thanks @barbados-clemens for looking into this! I'll this out in the next little bit. Really excited at the possibility of dropping ts-jest, its just so slow

when creating a jest project with babel-jest a root babel.config.json file will be create if one doesn't exist for allowing jest tests to run successfully ISSUES CLOSED: #6782

logitimate · 2021-11-23T04:09:46Z

Running into this while updating to Angular 13 / Nx 13. I tried added that babel config at the root and making sure I have @nrwl/web installed but it doesn't seem to be working still. Was there another step I needed to get around this for now?

valerius21 · 2021-11-23T10:44:04Z

Running into this while updating to Angular 13 / Nx 13. I tried added that babel config at the root and making sure I have @nrwl/web installed but it doesn't seem to be working still. Was there another step I needed to get around this for now?

I'm having the same issue.

nartc · 2021-11-23T14:33:18Z

@logitimate @valerius21 this issue (and probably the fix cc @barbados-clemens) is targeting nrwl/node, not nrwl/angular. Are you having issue with Angular and Jest with Angular 13 / Nx 13? If so, please create a new issue and we can track there. Thanks!

valerius21 · 2021-11-23T18:01:39Z

@nartc Hey, thanks for getting back to us. I am using NX 13 with nrwl/react and nrwl/next. Additionally, I am using the nrwl/storybook package.

I got some component libs, which are getting imported with import { SomeComponent } from '@mylib/components' in my application.

The tests are failing in the apps, not the libraries, but only, when getting used/imported over the import .. from ... syntax jest apparently does not know the syntax.

I am using the same import syntax in the libs without any issues.

Editing the transform and transformIgnorePattern attributes did not help, since Jest is throwing a similar error.

Everything is written in Typescript.

markogresak · 2021-11-25T22:52:16Z

~~Adding @babel/preset-env next to the original @nrwl/web/babel fixed the issue for me.~~

Turns out adding the @babel/preset-env is both wrong (can break the app) and unnecessary since the @nrwl/web/babel is already doing it.

However, there is a special config for the test environment:

nx/packages/web/babel.ts

Lines 42 to 43 in cddb1ed

    
           process.env.NODE_ENV === 'test' 
        
             ? { targets: { node: 'current' }, loose: true }

nx does not set this automatically, you have to set it in your environment, for example:

NODE_ENV=test nx test ...

Tip: look into cross-env (no affiliation) if you want cross-platform support for the env variable syntax above.

valerius21 · 2021-11-26T13:46:46Z

@markogresak thanks!

The error disappears. I am now getting the
SyntaxError: Cannot use import statement outside a module
Error.

I'll try to do some config tweaking.

markogresak · 2021-11-26T14:01:24Z

@valerius21 you’re using ES Modules somewhere. You have to set up mapping or transforms to process the file.

Or you can try enabling esmodules (https://jestjs.io/docs/ecmascript-modules), but I’m not sure if the nx setup supports it so there’s a good chance things will break.

when creating a jest project with babel-jest a root babel.config.json file will be create if one doesn't exist for allowing jest tests to run successfully ISSUES CLOSED: #6782

when creating a jest project with babel-jest a root babel.config.json file will be create if one doesn't exist and babel deps install for allowing jest tests to run successfully ISSUES CLOSED: #6782

* fix(testing): create root babel config for babel-jest option when creating a jest project with babel-jest a root babel.config.json file will be create if one doesn't exist and babel deps install for allowing jest tests to run successfully ISSUES CLOSED: #6782 * feat(testing): add migration for missing root babel config

github-actions · 2023-03-23T04:05:14Z

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.

WonderPanda added the type: bug label Aug 20, 2021

leosvelperez added the scope: node Issues related to Node, Express, NestJS support for Nx label Aug 27, 2021

nartc added scope: testing tools Issues related to Cypress / Jest / Playwright / Vitest support in Nx and removed scope: node Issues related to Node, Express, NestJS support for Nx labels Nov 12, 2021

barbados-clemens self-assigned this Nov 12, 2021

barbados-clemens added the scope: node Issues related to Node, Express, NestJS support for Nx label Nov 12, 2021

barbados-clemens mentioned this issue Nov 19, 2021

fix(testing): Create root babel config if one isn't present #7816

Merged

3 tasks

na-ji mentioned this issue Dec 29, 2021

React's babel/jest configuration is creating an error: Cannot use import statement outside a module #8323

Closed

barbados-clemens closed this as completed in #7816 Jan 7, 2022

github-actions bot added the outdated label Mar 23, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@nrwl/node library babel jest setting does not work #6782

@nrwl/node library babel jest setting does not work #6782

WonderPanda commented Aug 20, 2021

smo043 commented Sep 11, 2021

smo043 commented Sep 17, 2021

the-ult commented Nov 9, 2021 •

edited

Loading

barbados-clemens commented Nov 12, 2021

barbados-clemens commented Nov 18, 2021 •

edited

Loading

barbados-clemens commented Nov 18, 2021

WonderPanda commented Nov 18, 2021

logitimate commented Nov 23, 2021

valerius21 commented Nov 23, 2021

nartc commented Nov 23, 2021

valerius21 commented Nov 23, 2021 •

edited

Loading

markogresak commented Nov 25, 2021 •

edited

Loading

valerius21 commented Nov 26, 2021

markogresak commented Nov 26, 2021

github-actions bot commented Mar 23, 2023

@nrwl/node library babel jest setting does not work #6782

@nrwl/node library babel jest setting does not work #6782

Comments

WonderPanda commented Aug 20, 2021

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

Environment

smo043 commented Sep 11, 2021

smo043 commented Sep 17, 2021

the-ult commented Nov 9, 2021 • edited Loading

barbados-clemens commented Nov 12, 2021

barbados-clemens commented Nov 18, 2021 • edited Loading

barbados-clemens commented Nov 18, 2021

WonderPanda commented Nov 18, 2021

logitimate commented Nov 23, 2021

valerius21 commented Nov 23, 2021

nartc commented Nov 23, 2021

valerius21 commented Nov 23, 2021 • edited Loading

markogresak commented Nov 25, 2021 • edited Loading

valerius21 commented Nov 26, 2021

markogresak commented Nov 26, 2021

github-actions bot commented Mar 23, 2023

the-ult commented Nov 9, 2021 •

edited

Loading

barbados-clemens commented Nov 18, 2021 •

edited

Loading

valerius21 commented Nov 23, 2021 •

edited

Loading

markogresak commented Nov 25, 2021 •

edited

Loading