title: Jest SyntaxError: Unexpected token <
body: <p>I'm want to test a component in react app using jest enzyme with typescript, I follow instruction in <a href="https://jestjs.io/" rel="noreferrer">jest</a>  but for some reason I get:  <code>SyntaxError: Unexpected token &lt;</code></p>
  
  <p>I can test test some functions there is no problem with that, but when I use component I get an error, </p>
  
  <p>this is jest config in <code>package.json</code></p>
  
  <pre><code>"jest": {
      "transform": {
        "^.+\\.tsx?$": "ts-jest"
      },
      "testMatch": ["**/__tests__/*.(ts|tsx)"],
      "snapshotSerializers": ["enzyme-to-json/serializer"],
      "setupFilesAfterEnv": ["&lt;rootDir&gt;/src/setupEnzyme.ts"],
      "unmockedModulePathPatterns": ["node_modules/react/", "node_modules/enzyme/"]
    }
  </code></pre>
  
  <p>enzyme config</p>
  
  <pre><code>import { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  
  configure({ adapter: new Adapter() });
  </code></pre>
  
  <pre><code>export default class TesComponent extends Component { 
      render(){
          return (
              &lt;div&gt;test&lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <pre><code>import { shallow } from 'enzyme'
  import TestCompoenent from '../TestComponent'
  
  test('component testing', () =&gt; {
      const component = shallow(&lt;TestCompoenent /&gt;)
      expect(component.contains(&lt;div&gt;test&lt;/div&gt;)).toBeTruthy()
  })
  </code></pre>
  
  <p>this is the error</p>
  
  <pre><code>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:
  
      /home/user/Documents/local-platform/frontend/src/pages/__tests__/settigs.test.tsx:9
          var component = enzyme_1.shallow(&lt;TestComponent_1.default /&gt;);
                                           ^
  
      SyntaxError: Unexpected token &lt;
  
        at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
        at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
  </code></pre>
  
  <p>i expect for test to pass because Test Component does include <code>&lt;div&gt;test&lt;/div&gt;</code></p>