Can't get it to work with the new JSX transform in React 17 & create-react-app v4

[mezei]

With the new JSX transform introduced in React (see: https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md) it is no longer necessary to import React at the top of each component - as it should be in scope "by default" when Webpack is correctly configured.

However if I attempt to do the same with test files I get the usual "React is not defined" error.
React has to be imported both in the target component & the test file for it to actually work.

Am I missing some configuration for this library or is this just not supported yet?

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a link to a repository on GitHub.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[mezei]

Here is a test repo with a simplified config:
https://github.com/mezei/react-testing-lib-new-transform

I'm not sure yet whether this is a bug or I'm just missing some configuration, babel transform setting, etc for either package, as there is no documentation for this case in react-testing-library (because this stuff is still very new).

The issue is that even though I can exclude calling import React from 'react' for most of my components (due to the new JSX transform), I still need to call this import for components which have unit tests. else I get the above error.

[nickserv]

This is an issue with your Babel configuration, not React Testing Library. The .babelrc (which is only used by Jest) is missing "runtime": "automatic" so the new JSX transform is disabled. You can simplify your Babel configs and fix this by merging both your Babel configs into .babelrc with this option and removing the options from babel-loader, which I've done in mezei/react-testing-lib-new-transform#1.

[shengnoyi]

For those using react-app-rewired:

My project does not use a .babelrc before and i just want to use the same config from cra while running test.
The config in react scripts:

// node_modules/react-scripts/config/jest/babelTransform.js
module.exports = babelJest.createTransformer({
  presets: [
    [
      require.resolve('babel-preset-react-app'),
      {
        runtime: hasJsxRuntime ? 'automatic' : 'classic',
      },
    ],
  ],
  babelrc: false,
  configFile: false,
});

The config in react-app-rewired:

// node_modules/react-app-rewired/scripts/utils/babelTransform.js
const babelJest = require('babel-jest');

module.exports = babelJest.createTransformer({
  presets: [require.resolve('babel-preset-react-app')],
  plugins: [],
  babelrc: true
});

So i override the config-overrides.js like this:

const path = required("path")
module.exports = {
  jest: function(config) {
    if (config["transform"]["^.+\\.(js|jsx|mjs|cjs|ts|tsx)$"]) {
      config["transform"]["^.+\\.(js|jsx|mjs|cjs|ts|tsx)$"] = path.resolve(
        "node_modules/react-scripts/config/jest/babelTransform.js"
      );
    }
    return config;
  },
};

And it works perfectly.

[yareyaredesuyo]

Support for the experimental syntax 'flow' isn't currently enabled

typescriptやで

[MatanBobi]

@yareyaredesuyo can you share your .babelrc so we'll be able to see? My guess is that you're not adding @babel/preset-typescript

[ZennerBlade]

Facing the same issue

As suggested above, my .babelrc already has runtime set to automatic

"presets": [ "@babel/preset-env", [ "@babel/preset-react", { "runtime": "automatic" } ] ],

And my webpack has babel-loader without any additional options

{ test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader', 'eslint-loader'], },

I'm still getting react is not defined issue in my tests while the components are working perfectly

Did anyone figure out the solution?

[gugol2]

Any solution for a Create React App without rewiring or ejecting?

[nickserv]

CRA is not actively maintained by Facebook currently. 10 PRs have been opened in the last month, none of them have been merged. I've had UX-critical PRs open for months without a response. Additionally, only 3 people have committed to origin this year.

I'd recommend switching to Vite with this template: https://github.com/nickmccurdy/vite-react-testing

Vite supports configuring pretty much anything without rewiring or ejecting too.