title: Jest won't transform the module - SyntaxError: Cannot use import statement outside a module
body: <p>I couldn't get rid of this <code>SyntaxError: Cannot use import statement outside a module</code> error no matter what I have tried and it got so frustrating. Is there anybody out here solved this issue? I have read a million stackoverflow and github issue threads. No clear solutions.</p>
  
  <p>This is a React, Typescript, Webpack project. I am trying to test a module. But Jest won't transform the <strong>module to plain javascript</strong> somehow.</p>
  
  <h2>The error I get is</h2>
  
  <pre><code>/Users/me/dev/Project/project/node_modules/variables/src/variables.js:12
      import './main.js';
      ^^^^^^
  
      SyntaxError: Cannot use import statement outside a module
  
        17 | 
        18 | */
      &gt; 19 | import { GlobalVars } from 'variables'
           | ^
        20 | 
        21 | export const Vars = new GlobalVars()
        22 | 
  </code></pre>
  
  <h2>What I have tried to solve this (and didn't work):</h2>
  
  <ul>
  <li><p>Using <code>env</code> setup in <code>babel.config</code>: <code>env.test.preset: ['@babel/plugin-transform-modules-commonjs']</code></p></li>
  <li><p>modifying <code>transform</code> setup in Jest configuration as <code>'^.+\\.jsx?$': 'babel-jest', '^.+\\.tsx?$': 'ts-jest'</code> and all other possibilities around this.</p></li>
  <li><p>In Jest configuration, <code>testPathIgnorePatterns</code>, <code>transformIgnorePatterns</code></p></li>
  <li><p>Using  <code>.babel.config.js</code> instead of <code>.babelrc.js</code></p></li>
  </ul>
  
  <p>...and more.</p>
  
  <h2>I have this setup:</h2>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>  "jest": {
      "preset": "ts-jest",
      "testEnvironment": "node"
    }
  </code></pre>
  
  <p><strong>.babelrc.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    presets: [
      ['@babel/preset-env', { targets: { node: 'current' } }],
      '@babel/preset-react',
      '@babel/preset-typescript',
    ],
    plugins: [
      '@babel/plugin-transform-runtime',
      '@babel/proposal-class-properties',
      '@babel/transform-regenerator',
      '@babel/plugin-transform-template-literals',
      'react-hot-loader/babel',
    ],
  }
  </code></pre>
  
  <p><strong>variables.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { GlobalVars } from 'variables'
  
  export const Vars = new GlobalVars()
  </code></pre>
  
  <p><strong>variables.spec.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Vars } from './variables.ts'
  
  describe('Test The Package', () =&gt; {
    it('Should accept new variables', () =&gt; {
      Vars.newVariable = 'new variable'
      expect(Vars.newVariable).toEqual('new variable')
    })
  })
  
  </code></pre>
  
  <p>Any idea on how to resolve this problem?</p>