title: How to configure Jest for Vue app that runs via Webpacker
body: <p>I've got a Rails app that manages a Vue app through the Webpacker gem.</p>
  
  <p>I'm having trouble setting up Jest for unit tests.  I've had to add a few new dependencies like <code>vue-jest</code> and <code>babel-jest</code>, but now I'm stuck with the problem of the tests not recognizing a new component.  </p>
  
  <p>When I run the <code>jest</code> command (via yarn), the test I've written fails once it encounters a new component that's imported in the component under test.</p>
  
  <pre><code>import AnotherComponent from './another-component.js';
         ^^^^^^^^^^^^^
  
  SyntaxError: Unexpected identifier
  
    2 | 
    3 | import { mount } from '@vue/test-utils';
  &gt; 4 | import ComponentUnderTest from '../src/component-under-test.vue';
      | ^
    5 | 
  </code></pre>
  
  <p>My <code>package.json</code> looks like this:</p>
  
  <pre><code>"jest": {
    "roots": [
      "test"
    ],
    "moduleFileExtensions": [
      "js",
      "json",
      "node",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "&lt;rootDir&gt;/node_modules/babel-jest",
      ".*\\.(vue)$": "&lt;rootDir&gt;/node_modules/vue-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/"
    ]
  },
  </code></pre>
  
  <p>Any idea what more configuration I need to provide in order to fix this?</p>