Can't get "vue-jest" working with Rails Webpacker

[davidfabreguette]

I'm trying to use Jest alongside Rails Webpacker VueJS integration.

I've setup an example app : https://github.com/davidfabreguette/vue-jest-app.

The problem is :

export default {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

(It also throws the "Cannot use import statement outside a module" error in my production app).

The thing is the first import in https://github.com/davidfabreguette/vue-jest-app/blob/b5a08235de96da50807408d1f2c63d7fc0eccfc1/app/javascript/tests/myspecs.spec.js#L1
is working fine, so I guess "vue-jest" is not picking up the right root babel config that Rails webpacker is setting up.

I also tried to add a babel configFile directive :

"jest": {
     //...
    "globals": {
      "vue-jest": {
         "babelConfig": {
           "configFile": "babel.config.js"
         }
       }
     }
  }

But then I get this error :

ReferenceError: [BABEL] unknown: Unknown option: base.configFile. Check out http://babeljs.io/docs/usage/options/ for more information about options.

    A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

    Invalid:
      `{ presets: [{option: value}] }`
    Valid:
      `{ presets: [['presetName', {option: value}]] }`

    For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options.

My understanding is not good enough to get this solved.
Is anyone having a clue of what's not working ?

[yoonasy]

Jest is not supported by import, you may need to configure Babel?

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}