Jest encountered an unexpected token, SDK 4.32, React 18

[clu_yo]

I have added @ArcGIS/maps-components-react 4.32.14 to our React 18.3.1 project. I am having issues running Jest tests on the new component. 

Static class blocks are not enabled. Please add `@babel/plugin-transform-class-static-block` to your configuration

This error is saying that @babel/plugin-transform-class-static-block is not enabled. But that package is included in '@babel/preset-env' (babel-plugin-transform-class-static-block )

I went ahead and tried to install it separately as a dev dependency anyway and add static block to the babel.config.js below:

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-react'
  ],
  plugins: [
    '@babel/plugin-transform-class-static-block',
    '@babel/plugin-transform-class-properties'
  ]
}

The project adds configurations through the script/cli options:  

"react-scripts test --silent --coverage --setupFilesAfterEnv='./src/.setupTests.js' --transformIgnorePatterns \"node_modules/(?!(@arcgis|@esri/calcite-components|@stencil/core|primereact|primeicons|primeflex|axios)/)\""

[clu_yo]

The babel.config.js file is doing nothing. Since the project is a CRA, the project will not read external config files. It is all managed by CRA. 

CRA includes @babel/preset-env, which itself contains "@babel/plugin-transform-class-static-block": "^7.27.1". Not sure then how I am suppose to add class static blocks to a config file if it is supposed to already be included and I can't edit the config file of a CRA.

[JamesIng · Accepted solution]

CRA is fairly old and is now marked as depreciated so you may want to consider using a different framework such as vite.

That said to get different babel configs working in CRA you'll likely need to 'eject' CRA which will allow you to manage all the config of your project. Note once you've ejected you can not go back.