title: Unexpected token 'import' error while running Jest tests?
body: <p>I realize this question has been asked several times but all of the solutions I've come across don't seem to work for me. I'm running into the following error while trying to run Jest tests for a Vue app.</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:
   • 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://facebook.github.io/jest/docs/en/configuration.html
  
  Details:
  
  /node_modules/vue-awesome/icons/expand.js:1
  ({&quot;Object.&lt;anonymous&gt;&quot;:function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
                                                                                           ^^^^^^
  
  SyntaxError: Unexpected token import
  
  &gt; 17 | import 'vue-awesome/icons/expand'
  </code></pre>
  <p>.babelrc:</p>
  <pre><code>{
    &quot;presets&quot;: [
      [&quot;env&quot;, {
        &quot;modules&quot;: false,
        &quot;targets&quot;: {
          &quot;browsers&quot;: [&quot;&gt; 1%&quot;, &quot;last 2 versions&quot;, &quot;not ie &lt;= 8&quot;]
        }
      }]
    ],
    &quot;env&quot;: {
      &quot;test&quot;: {
        &quot;presets&quot;: [
          [&quot;env&quot;, { &quot;targets&quot;: { &quot;node&quot;: &quot;current&quot; }}]
        ]
      }
    }
  }
  </code></pre>
  <p>jest config in package.json:</p>
  <pre><code>&quot;jest&quot;: {
    &quot;moduleFileExtensions&quot;: [
      &quot;js&quot;,
      &quot;vue&quot;
    ],
    &quot;moduleNameMapper&quot;: {
      &quot;^@/(.*)$&quot;: &quot;&lt;rootDir&gt;/src/$1&quot;
    },
    &quot;transform&quot;: {
      &quot;^.+\\.js$&quot;: &quot;&lt;rootDir&gt;/node_modules/babel-jest&quot;,
      &quot;.*\\.(vue)$&quot;: &quot;&lt;rootDir&gt;/node_modules/vue-jest&quot;
    },
    &quot;snapshotSerializers&quot;: [
      &quot;&lt;rootDir&gt;/node_modules/jest-serializer-vue&quot;
    ],
    &quot;moduleDirectories&quot;: [
      &quot;node_modules&quot;,
      &quot;src&quot;
    ]
  }
  </code></pre>
  <p>It looks like the initial import in the script for the Vue component being mounted for the test is working but the import within the module itself (<code>import Icon from '../components/Icon.vue</code>) is not recognized.</p>
  <p>boiler plate repo to re-creates the issue: <a href="https://github.com/DonaldPeat/stackoverflow-jest-question" rel="noreferrer">github.com/DonaldPeat/stackoverflow-jest-question</a></p>
  <p>How can I resolve this?</p>