title: jest tests fail at parsing plain HTML tags in a React Component
body: <p>Test runs break while parson standard HTML tags in jest. I am using Babel, Webpack, Jest and React Testing library. </p>
  
  <p>I have installed following packages for enabling jest</p>
  
  <pre><code>"@babel/plugin-proposal-class-properties": "7.8.3",
  "@babel/plugin-syntax-dynamic-import": "7.8.3",
  "@babel/plugin-transform-modules-commonjs": "7.8.3",
  "@babel/preset-react": "7.8.3",
  "@babel/standalone": "7.8.6",
  "@testing-library/dom": "6.12.2",
  "@testing-library/jest-dom": "5.1.1",
  "@testing-library/react": "9.4.0",
  "babel-jest": "25.1.0",
  </code></pre>
  
  <p>And in <code>package.json</code> I have configured jest as follows</p>
  
  <pre><code>"jest": {
    "verbose": true,
    "collectCoverage": true,
    "roots": [
        "&lt;rootDir&gt;/resources/js/"
    ],
    "testRegex": "tests/.*.test.js$",
    "moduleDirectories": [
        "resources/js/",
        "node_modules"
    ],
    "moduleNameMapper": {
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "__mocks__/fileMock.js",
        "\\.(css|scss)$": "__mocks__/styleMock.js"
    }
  }
  </code></pre>
  
  <p>and since I'm running it in Laravel; I'm using <code>.bablerc</code> format for babel configuration, which has the following configuration</p>
  
  <pre><code>{
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ]
  }
  </code></pre>
  
  <p>Here's the test that fails </p>
  
  <pre><code>// import dependencies
  import React from "react";
  // import react-testing methods
  import { render } from "@testing-library/react";
  // add custom jest matchers from jest-dom
  import "@testing-library/jest-dom/extend-expect";
  // the component to test
  import BlogEditor from "../../containers/BlogEditor/BlogEditor";
  
  // https://jestjs.io/docs/en/mock-functions#mocking-modules
  //jest.mock("axios");
  
  test("Blog Editor renders", () =&gt; {
      const { getByTestId } = render(&lt;BlogEditor /&gt;);
  });
  </code></pre>
  
  <p>The BlogEditor component has a div tag containing other input components</p>
  
  <pre><code>render() {
      return (
          &lt;div className="p-col-12"&gt;
              &lt;div className="p-lg-12"&gt;
                  &lt;InputText
                      defaultValue={this.props.defaultTitle}
                      id="title"
                      placeholder="Blog Title"
                      onChange={e =&gt;
                          this.handleInput("title", e.target.value)
                      }
                      onBlur={this.props.enableSave}
                  /&gt;
              &lt;/div&gt;
              // further details omitted...
  </code></pre>
  
  <p>The test fails at parsing the <code>div</code> tag of all things </p>
  
  <pre><code>Test suite failed to run
  
  Jest encountered an unexpected token
  
  This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
  
  By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
  
  Here's what you can do:
   • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
   • If you need a custom transformation specify a "transform" option in your config.
   • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
  
  You'll find more details and examples of these config options in the docs:
  https://jestjs.io/docs/en/configuration.html
  
  Details:
  
  SyntaxError: /Code/github/website/adminpanel/resources/js/containers/BlogEditor/BlogEditor.js: Unexpected token (46:12)
  
    44 |     render() {
    45 |         return (
  &gt; 46 |             &lt;div className="p-col-12"&gt;
       |             ^
    47 |                 &lt;div className="p-lg-12"&gt;
    48 |                     &lt;InputText
    49 |                         defaultValue={this.props.defaultTitle}
  
    at Parser.raise (node_modules/@babel/parser/src/parser/location.js:41:63)
    at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:150:16)
    at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1123:20)
    at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:529:23)
    at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:509:21)
    at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:279:23)
    at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:234:23)
    at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:185:21)
    at Parser.parseParenAndDistinguishExpression (node_modules/@babel/parser/src/parser/expression.js:1300:16)
    at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1030:21)
  </code></pre>
  
  <p>How do I configure babel / jest to be able to parse the React components without these errors.</p>