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)/)\""

 

JamesIng

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.