title: How to configure jest and babel to work with vue?
body: <p>I'm adding jest to my project and can't configure it properly.</p>
  
  <p>When I run <code>$ jest</code> I'm getting a <code>SyntaxError: Cannot use import statement outside a module</code>.</p>
  
  <p>I've searched for quite a while for a solution but none worked...</p>
  
  <p>Can someone please help me config jest and babel?</p>
  
  <p>Here are my files:</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "psyque-frontend",
    "version": "1.0.0",
    "private": true,
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint",
      "test": "jest"
    },
    "dependencies": {
      "actioncable-vue": "^1.5.1",
      "axios": "^0.19.2",
      "chart.js": "^2.9.3",
      "material-design-icons-iconfont": "^5.0.1",
      "qs": "^6.9.1",
      "vue": "^2.6.11",
      "vue-axios": "^2.1.5",
      "vue-chartjs": "^3.5.0",
      "vue-router": "^3.1.6",
      "vuetify": "^1.5.21",
      "vuetify-datetime-picker": "^1.1.3"
    },
    "devDependencies": {
      "@vue/cli-plugin-babel": "^3.12.1",
      "@vue/cli-plugin-eslint": "^3.12.1",
      "@vue/cli-service": "^3.12.1",
      "@vue/test-utils": "^1.0.0-beta.32",
      "babel-eslint": "^10.1.0",
      "babel-jest": "^25.1.0",
      "eslint": "^5.16.0",
      "eslint-plugin-vue": "^5.2.3",
      "jest": "^25.1.0",
      "stylus": "^0.54.7",
      "stylus-loader": "^3.0.1",
      "ts-jest": "^25.2.1",
      "vue-cli-plugin-vuetify": "^0.6.3",
      "vue-jest": "^3.0.5",
      "vue-template-compiler": "^2.6.11",
      "vuetify-loader": "^1.4.3"
    },
    "eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
      ],
      "rules": {},
      "parserOptions": {
        "parser": "babel-eslint"
      }
    },
    "postcss": {
      "plugins": {
        "autoprefixer": {}
      }
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions",
      "not ie &lt;= 8"
    ]
  }
  </code></pre>
  
  <p><strong>jest.config.js</strong></p>
  
  <pre><code>module.exports = {
    moduleFileExtensions: ['js', 'json', 'ts', 'vue'],
    transform: {
      '.*\\.(js|jsx)$': 'babel-jest',
      '.*\\.(ts|tsx)?$': 'ts-jest',
      '.*\\.(vue)$': 'vue-jest'
    },
    verbose: true
  };
  </code></pre>
  
  <p><strong>babel.config.js</strong></p>
  
  <pre><code>module.exports = {
    presets: [
      '@vue/app'
    ]
  };
  </code></pre>
  
  <p><strong>Footer.test.js</strong></p>
  
  <pre><code>import { mount } from '@vue/test-utils'
  import Footer from './Footer'
  
  describe('Footer', () =&gt; {
    test('is a Vue instance', () =&gt; {
      const wrapper = mount(Footer);
      expect(wrapper.isVueInstance()).toBeTruthy();
    })
  });
  </code></pre>
  
  <p>Thank you very much for your support!</p>