Nx: use `babel-jest` instead of ts-jest when babel is used for compilation `@nrwl/react`

[Hotell]

Expected Behavior

yarn nx g @nrwl/react:app with-babel --babel=true --linter=eslint

should generate app that uses babel for compilation. eslint for linting and babel-jest for running transforms within jest instead of ts-jest which is deprecated and quite slow

Current Behavior

ts-jest is always used for libraries and apps

Context

Please provide any relevant information about your setup:

• version of Nx used 8.4.8
• 3rd-party libraries and their versions
• and most importantly - a use-case that fails

[jaysoo]

@Hotell , great suggestion. I'll add this to our features list.

[Hotell]

I highly recommend to add this "feature" to angular generators as well.

We recently migrated to pure babel-jest and the results are astonishing

[jbojcic1]

We are also having issue with this. Our tests stoped working once we introduced linguijs i18n library which uses babel macros.

@Hotell @jaysoo is there any way to extend or configure jest builder to use babel-jest with the same babel config that web build and dev-server builders are using or I have to write completely new builder?

[jaysoo]

@jbojcic1 You can swap out ts-jest with babel-jest in the jest.config.js file at your workspace root.

  transform: {
    '^.+\\.(ts|js|html)$': 'babel-jest'
  },

[wuichen]

@jaysoo are there other things i have to tweak? changing to babel-jest solely in the root folder breaks the test and gives me this error

● Validation Error:

Module babel-jest in the transform option was not found.
is: /Users/ichenwu/code/mercy/libs/board

[jaysoo]

@wuichen Make sure you also install babel-jest.

yarn add --dev babel-jest
# Or
npm install --save-dev babel-jest

Once we update our schematics to use babel-jest this would be done automatically for you.

[jaysoo]

Bringing in @Cammisuli as a second set of eyes on this. 👀

I haven't given this enough thought yet, but I definitely see a need to use babel-jest for React projects. We have two options:

1. Add support for React apps/libs only (so Angular and other projects won't be affected / benefit from this).
2. Add an option directly to @nrwl/jest schematics to use babel-jest, which can be used for non-React apps.

1 would be the easiest option since the changes required are minimal.

For #2 to work, we'll have to pull in more dev dependencies, such as @babel/core and @babel/preset-typescript (which isn't a big deal). Also there are some TS features that won't work (See https://kulshekhar.github.io/ts-jest/user/babel7-or-ts), however these features are seldomly used so may not matter.

[Hotell]

I'm in favour of option 2.

Why?

• in our organization we don't use typescript for transpilation (because of speed and ecosystem mostly / frontend is react only - for now ), but we have also libs/apps in node...
• also AFAIR there were various issues with transpiling vanilla web components in the past with typescript (so babel needed to be used)
• while having babel-jest option for every ecocystem, addtions of other technologies might be easier in the future (vue, svelte)

[jbojcic1]

@jaysoo it's not enough to just swap ts-jest with babel-jest because currently nx is setting all babel plugins and presets in the webpack config as babel-loader options. When running tests with babel-jest webpack is not used.

I ended up creating .babelrc.js in my app root and specified babel presets and plugins there. There is one caveat though. If you have some plugins that you need when running the app but not when running the tests, those plugins have to be added to webpack babel-loader options by extending webpack config and injecting it there.

Regarding the potential options, I agree with @Hotell

[jaysoo]

@jbojcic1 Yes, you will unfortunately have to duplicate babel settings for now.

It sounds like supporting --babel option for @nrwl/jest would be the best option. Angular apps can continue using ts-jest, and other projects can switch to babel-jest for better compatibility with their ecosystem.

[jbojcic1]

@jaysoo what is the status of this? perhaps I could give it a try if it hasn't been started yet?

[stramel]

When I used babel-jest it seemed to break the resolution of typescript paths

[jaysoo]

@jbojcic1 If you want try it out please feel free

We will need to investigate further, and unfortunately we currently have other issues taking priority.

---

Contribution notes

Once you've made your changes you can test out with:

yarn create-playground

This will take a while, but eventually you can cd into tmp/nx/proj and try adding some apps and libs.

yarn nx g @nrwl/react:app my-app
yarn nx g @nrwl/react:lib my-lib

To update the playground when you make changes to Nx, run:

yarn update-playground

[stramel]

This is still an issue AFAICT

[FrozenPandaz]

Hi, sorry about this.

This was mislabeled as stale. We are testing ways to mark _not reproducible_ issues as stale so that we can focus on actionable items but our initial experiment was too broad and unintentionally labeled this issue as stale.

[Hotell]

This was already implemented so I should probably close this https://github.com/nrwl/nx/pull/2722
WDYT @FrozenPandaz ?

[BigAB]

I've added a PR to make this the default behaviour when generating a project (app or lib) with the @nrwl/react schematic.
https://github.com/nrwl/nx/pull/3154