58

I started newly writing unit test cases using Jest and Enzyme for the react application and when try to run test cases using jest like "test": "jest --watch" rather "test": "react-scripts test" tests going through babel for the runner to understand react syntax.

And have been doing setup step by step using babel but this error Support for the experimental syntax 'jsx' isn't currently enabled stopping me to go further. And as suggested in some threads I have been trying with npm install --save-dev @babel/plugin-transform-react-jsx and tried to add the same plugin into babel configuration like shown in below package.json file but still no luck. enter image description here

And this is my package.json

{
  "name": "multitheme-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.9.0",
    "@material-ui/icons": "^3.0.2",
    "axios": "^0.18.0",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "jest-css-modules": "^2.1.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.5",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "babel": {
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env",
      "@babel/preset-flow"
    ],
    "plugins": [
      "@babel/plugin-transform-modules-commonjs",
      "@babel/plugin-transform-react-jsx"
      
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.10.4",
    "@babel/core": "^7.10.4",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-modules-commonjs": "^7.10.4",
    "@babel/plugin-transform-react-jsx": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-flow": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@babel/runtime": "^7.10.4",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.1.0",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-stage-0": "^6.24.1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.5.0",
    "jest": "^23.6.0",
    "jest-cli": "^26.1.0"
  },
  "jest": {
    "verbose": true,
    "clearMocks": true,
    "collectCoverage": true,
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTest.js",
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|scss)$": "identity-obj-proxy"
    }
  }
}

and here is my test case file

import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { shallow, configure } from 'enzyme';

import App from './App';

configure({adapter: new Adapter()});


describe('MyComponent', () => {
  it('should render correctly in "debug" mode', () => {
    const component = shallow(<App debug />);
    expect(component).toMatchSnapshot();
  });
});
Venkaiah Yepuri
  • 1,561
  • 3
  • 18
  • 29
  • Have you ejected your app? If not I don't think any of the additional config takes effect. You're not actually showing use of `jest --watch` in your package file, please give a proper [mre]. – jonrsharpe Jul 09 '20 at 17:08
  • 2
    @jonrsharpe sorry I didn't get this `Have you ejected your app?` sorry to say this I completely new to unit testing, can you please suggest me some code sample? – Venkaiah Yepuri Jul 09 '20 at 17:14
  • Well if you're using `react-scripts` did you create your app using Create React App? And if so, did you run the eject command shown in your package file before starting to add random configuration of your own? – jonrsharpe Jul 09 '20 at 17:15
  • @jonrsharpe `did you create your app using Create React App?` - Yes, `did you run the eject command shown in your package file before starting to add random configuration of your own?` - No – Venkaiah Yepuri Jul 09 '20 at 17:16
  • 2
    Then I'd recommend not trying to tinker with the setup unless you *really* know what you're doing, either stick with what's provided, [fork](https://create-react-app.dev/docs/alternatives-to-ejecting) to create your own or [eject](https://create-react-app.dev/docs/available-scripts#npm-run-eject). – jonrsharpe Jul 09 '20 at 17:18
  • @jonrsharpe, thanks for your time and what I understand is use react-script as it is without touching babel and eject when don't have much idea what I am doing with different configurations like `"test": "jest --watch"` and few others which were not come at app creation time using CRA? – Venkaiah Yepuri Jul 09 '20 at 17:33
  • 1
    @Venki You should always use Babel with Jest, at least for React testing because React app don't use valid JS. It's unclear why you started to use `jest` command instead of `react-scripts`. `react-scripts test` uses pre-configured Jest setup. If you really need to customize Jest, you need to eject, you'll be provided with Jest config that CRA uses and you can extend. Writing Jest config from scratch for complex setup like CRA isn't the most comfortable way to get started. – Estus Flask Jul 09 '20 at 18:11
  • @EstusFlask Thank you for your explanation. Now I understand a little about jest setup. – Venkaiah Yepuri Jul 10 '20 at 06:17
  • Why downvote my question? – Venkaiah Yepuri Jul 10 '20 at 06:18

6 Answers6

19

If this issue is related to using jest,

jest config for your package.json should look like

with typescript -

"jest": {
    ...
    
    "transform": {
       "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
    },
    
    ...
}

with js -

"jest": {
    ...
    
    "transform": {
       "^.+\\.(js|jsx)$": "babel-jest"
    },
    
    ...
}

If you have a jest.config.js then this goes in there:

import type { Config } from 'jest'

const config: Config = {
  ...
  "transform": {
    "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
  }
  ....
}

export default config
Liam
  • 27,717
  • 28
  • 128
  • 190
Sumit Lubal
  • 329
  • 2
  • 13
10

Adding my current solution as things constantly evolve.
I had a vanilla cra with jest and test dependencies

    "devDependencies": {
     "@babel/preset-env": "^7.14.9",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "jest": "^26.6.3"
  },

the solution was simple

  • install yarn add @babel/preset-react

  • then correctly setup babel.config.js

    module.exports = {
        presets: [
          '@babel/preset-react',
          [ 
            '@babel/preset-env',
            {
              targets: {
                node: 'current',
              },
            },
          ],
        ],
      };
  • note
    in a .babelrc you use a different syntax for the presets array compared to the babel.config.js
Nigel Savage
  • 991
  • 13
  • 26
7

Looking at the error it looks its not able to load the preset for react. Switch to the config file and move the configuration of babel from package.json to it. A sample file would look like below and will be located at the same level as package.json and called as babel.config.js

module.exports = function (api) {
  const presets = [
      '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-flow'
  ];
  const plugins = [
    '@babel/plugin-transform-runtime',
  ];

  /** this is just for minimal working purposes,
     * for testing larger applications it is
     * advisable to cache the transpiled modules in
     * node_modules/.bin/.cache/@babel/register* */
  api.cache(false);

  return {
    presets,
    plugins
  };
};
Rain.To
  • 504
  • 2
  • 7
  • 3
    Unfortunately, this isn't the case, the question is specific to Babel in Jest config. – Estus Flask Jul 09 '20 at 17:37
  • 2
    @Rain Yes, this is related babel config for react while using Jest. – Venkaiah Yepuri Jul 09 '20 at 17:39
  • 1
    @EstusFlask, can you please teach me when to use & not use babel in Jest ? actually without using babel also test cases are passing successfully but with having some curiosity I just modified `react-scripts` to `jest` and then try to run `npm test` as suggested in udemey online course then started headache with babel. Can you please help with the above ask, Estus? – Venkaiah Yepuri Jul 09 '20 at 17:50
4

I'm not sure if helps because for me wasn't related to jest. But I had the same error and after a lot of google I found this https://stackoverflow.com/a/52693007/10952640

TL;DR you could be missing to set the babel/preset-react on webpack also:

rules: [
  {
    test: /\.(js|jsx)$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel-loader',
    options: { presets: ['@babel/env', '@babel/preset-react'] },
  },
Dharman
  • 30,962
  • 25
  • 85
  • 135
BetoLima1
  • 441
  • 5
  • 7
  • I had the exact same issue, but my setup is a little bit trickier. Long short story, I'm using string-replace-loader to conditionally import components at build time. The issue was that I didn't had inside my webconfig.prod.config `presets: ['@babel/env', '@babel/preset-react']`. Thanks for pointing me in the right direction :D – Mutu A. Sep 02 '22 at 22:05
  • Which file is the code from your answer located in? – parsecer Mar 06 '23 at 23:09
1

I fixed this by removing the builds/ folder which was created by npm run build on the same level as my package.json. After the removal I ran jest --coverage again and it worked. It can also have to do something with this.

Lorz Ronz
  • 51
  • 1
  • 7
0

If you are using a jest.config.js file with Webpack, one possible cause is the jest.config.js file needing to be in the root directory, same level as package.json.

Petter
  • 99
  • 4