title: Jest encountered an unexpected token when working with React TypeScript
body: <p>I am building a reusable react component without using react-app and I am very new to Jest. I keep on getting this message. I have tried several post solutions on Stackoverflow but I am stuck at the moment:</p>
  <p>● Test suite failed to run</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 &quot;node_modules&quot;.
  
  Here's what you can do:
   • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
   • To have some of your &quot;node_modules&quot; files transformed, you can specify a custom &quot;transformIgnorePatterns&quot; in your config.
   • If you need a custom transformation specify a &quot;transform&quot; 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 &quot;moduleNameMapper&quot; config option.
  
  You'll find more details and examples of these config options in the docs:
  https://jestjs.io/docs/en/configuration.html
  
  Details:
  
  C:\Users\User\Documents\accessible-date-picker\src\__tests__\DatePicker.spec.js:1
  ({&quot;Object.&lt;anonymous&gt;&quot;:function(module,exports,require,__dirname,__filename,global,jest){import { DatePicker } from '../containers/DatePicker';
                                                                                           ^^^^^^
  
  SyntaxError: Cannot use import statement outside a module
  
    at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  </code></pre>
  <p>I have the following configuration but I cannot figure out why I cannot resolve the problem:</p>
  <pre><code>//jest.config.js
  module.exports = {
    roots: [&quot;&lt;rootDir&gt;/src&quot;],
    testMatch: [
      &quot;**/__tests__/**/*.+(ts|tsx|js)&quot;,
      &quot;**/?(*.)+(spec|test).+(ts|tsx|js)&quot;,
    ],
    transform: {
      &quot;^.+\\.(ts|tsx)$&quot;: &quot;ts-jest&quot;,
    },
    coveragePathIgnorePatterns: [
      &quot;/node_modules/&quot;
    ],
    moduleNameMapper: {
      &quot;\\.(css|less)$&quot;: &quot;identity-obj-proxy&quot;,
    }
  };
  </code></pre>
  <p>Here is my tsconfigurations:</p>
  <pre><code>{
      &quot;compilerOptions&quot;: {
          &quot;lib&quot;: [
              &quot;dom&quot;,
              &quot;dom.iterable&quot;,
              &quot;esnext&quot;
          ],
          &quot;allowJs&quot;: true,
          &quot;allowSyntheticDefaultImports&quot;: true,
          &quot;skipLibCheck&quot;: true,
          &quot;esModuleInterop&quot;: true,
          &quot;strict&quot;: true,
          &quot;forceConsistentCasingInFileNames&quot;: true,
          &quot;moduleResolution&quot;: &quot;node&quot;,
          &quot;resolveJsonModule&quot;: true,
          &quot;isolatedModules&quot;: true,
          &quot;noEmit&quot;: true,
          &quot;jsx&quot;: &quot;react&quot;
      },
      &quot;include&quot;: [
          &quot;src&quot;
      ]
  }
  </code></pre>
  <p>Here are my dev dependencies:</p>
  <pre><code> &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.12.7&quot;,
      &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.12.1&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.12.7&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.12.7&quot;,
      &quot;@babel/preset-typescript&quot;: &quot;^7.12.7&quot;,
      &quot;@babel/runtime&quot;: &quot;^7.12.5&quot;,
      &quot;@teamsupercell/typings-for-css-modules-loader&quot;: &quot;^2.4.0&quot;,
      &quot;@types/fork-ts-checker-webpack-plugin&quot;: &quot;^0.4.5&quot;,
      &quot;@types/jest&quot;: &quot;^26.0.15&quot;,
      &quot;@types/react&quot;: &quot;^17.0.0&quot;,
      &quot;@types/react-dom&quot;: &quot;^17.0.0&quot;,
      &quot;@types/webpack&quot;: &quot;^4.41.25&quot;,
      &quot;@types/webpack-dev-server&quot;: &quot;^3.11.1&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^4.8.1&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^4.8.1&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.1&quot;,
      &quot;css-loader&quot;: &quot;^5.0.1&quot;,
      &quot;eslint&quot;: &quot;^7.14.0&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.21.5&quot;,
      &quot;eslint-plugin-react-hooks&quot;: &quot;^4.2.0&quot;,
      &quot;fork-ts-checker-webpack-plugin&quot;: &quot;^6.0.3&quot;,
      &quot;jest&quot;: &quot;^26.6.3&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;ts-jest&quot;: &quot;^26.4.4&quot;,
      &quot;ts-node&quot;: &quot;^9.0.0&quot;,
      &quot;typescript&quot;: &quot;^4.1.2&quot;,
      &quot;webpack&quot;: &quot;^5.6.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.2.0&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;
    }
  }
  </code></pre>
  <p>Any help will be much appreaciated!</p>