title: Jest encountered an unexpected token with React App
body: <p>When trying to run tests with Jest in a React app, I get a 'Jest encountered an unexpected token' error. </p>
  
  <p>I bootstrapped the app with <code>npx create-react-app</code>.
  A simple demo-test where I check if 1 + 1 = 2 works. 
  But as soon as I want to test components I get the above error. </p>
  
  <p>I tried to configure babel with <code>babel.config.js</code> and added jest configuration in my package.json but still the error remains. </p>
  
  <p>Here's my package.json file:</p>
  
  <pre><code>"dependencies": {
      "react": "~16.9.0",
      "react-dom": "~16.9.0",
      "react-icons": "~3.7.0",
      "react-scripts": "~3.1.1",
      "react-validation-framework": "^5.1.0"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "jest",
      "eject": "react-scripts eject"
    },
  "jest": {
      "verbose": true,
      "moduleNameMapper": {
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "&lt;rootDir&gt;/assetTransformer.js",
        "\\.(css|less)$": "&lt;rootDir&gt;/assetTransformer.js"
      }
    },
  "devDependencies": {
      "@babel/core": "^7.5.5",
      "@babel/preset-env": "^7.5.5",
      "babel-jest": "^24.9.0",
      "jest": "^24.9.0",
      "babel-plugin-transform-export-extensions": "^6.22.0",
      "babel-preset-env": "^1.7.0",
      "babel-preset-react-app": "^9.0.1",
      "enzyme": "~3.10.0",
      "enzyme-adapter-react-16": "~1.14.0",
      "react-test-renderer": "~16.9.0",
      "sinon": "^7.4.2"
    }
  </code></pre>
  
  <p>I have a <code>setupTests.js</code> file in src/<strong>tests</strong> written as follow:</p>
  
  <pre><code>import { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  
  configure({ adapter: new Adapter() });
  </code></pre>
  
  <p>The component I am testing is in src/App and is as follow</p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import UserForm from './components/UserForm'
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;UserForm/&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>The <code>App.test.js</code> is in src/<strong>tests</strong> and looks like this: </p>
  
  <pre><code>import React from 'react';
  import { shallow } from 'enzyme';
  import App from '../App';
  
  describe('First React component test with Enzyme', () =&gt; {
     it('renders without crashing', () =&gt; {
        shallow(&lt;App /&gt;);
      });
  });
  </code></pre>