Jest encountered an unexpected token React

Question

This is screenshot of error:

I have 2 tests, the first one is working alright: sum.js :

function sum(a, b) {
    return a + b;
  }
  module.exports = sum;

sum.test.js

const sum = require('./sum');

test('adds 2 + 5 to equal 7', () => {
  expect(sum(2, 5)).toBe(7);
});

it works okay, prints message in console.

the second one (I dont sure) is set by default by create-react-app

App.test.js :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

App.js :

import React, { Component } from 'react';
import {HashRouter} from "react-router-dom";
import Routes from './routes';
import Alerts from './app/components/alerts';
import Navbar from '../src/app/navbar/navbar'
import Auth from './app/settings/auth';
import Register from './app/entities/user/modify-modal';
import './index.scss';

class App extends Component {

    componentWillMount(){
    }

  render() {
    return (
      <HashRouter>
                <>
                    <Auth></Auth>
                    <Navbar></Navbar>
                    <Alerts></Alerts>
                    <Register/>
                    <div className={"content-root"}>
                        <Routes/>
                    </div>
                </>
            </HashRouter>
    );
  }
}

export default App;

package.json

{
  "name": "x5_r_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.1",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@fortawesome/fontawesome-free": "^5.7.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.12",
    "@fortawesome/free-solid-svg-icons": "^5.6.3",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "axios": "^0.18.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "bootstrap": "^4.2.1",
    "jest": "^24.5.0",
    "jest-cli": "^24.5.0",
    "jsdom": "^14.0.0",
    "moment": "^2.23.0",
    "node-sass": "^4.11.0",
    "react": "^16.7.0",
    "react-addons-test-utils": "^15.6.2",
    "react-bootstrap": "^1.0.0-beta.5",
    "react-bootstrap-typeahead": "^3.2.4",
    "react-datetime": "^2.16.3",
    "react-debounce-input": "^3.2.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.2",
    "react-select": "^2.3.0",
    "reactstrap": "^7.0.2",
    "rxjs": "^6.3.3",
    "scss": "^0.2.4",
    "test": "^0.6.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "babel-core": "^6.26.3",
    "babel-jest": "^24.5.0"
  }
}

package-lock.json is 20000 rows of code, so I dont know, what part of it is needed for explanation of my problem, all guides that I've read about this problem were useless for me, so I am asking here.

Answer 1

The issue is that the app was bootstrapped with create-react-app , but then the latest version of Jest was also installed and the npm test script within package.json was changed to launch jest directly.

The test failed since Jest was not configured to transpile the JSX syntax.

---

Tests that use syntax like JSX have to be transpiled before they can be run by Jest .

create-react-app includes react-scripts which handles all of that configuration automatically.

---

If an app is bootstrapped with create-react-app then Jest does not need to be installed and configured manually.

---

If an app is not bootstrapped with create-react-app , or if the app is ejected from create-react-app , then Jest needs to be installed and configured to transpile the test code.