Error with ES6 Imports with Jest and Parcel

Question

I have a project using react-parcel-app as a template, and I'm trying to integrate Jest but I'm having the following error.

   Details:

/home/papaponmx/Projects/prime/src/actions/goals.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { addGoal } from './goals.mjs';

This is what my .babelrc looks like.

{
  "presets": [
    [
      "env",
      {"modules": false},
      {
        "targets": {
          "browsers": [
            "last 2 versions"
          ]
        }
      }
    ],
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ],
  "env": {
    "testing": {
      "presets": ["es2015", "stage-1", "react" ],
      "plugins": [
        "lodash",
        "transform-runtime",
        "transform-es2015-modules-commonjs",
        "dynamic-import-node"
      ]
    }
  }
}

I understand that parcel is supposed to support ES Modules without configuration, but I don't get the test import s to work.

Here is the link to the repo in case you want to run it locally.

Answer 1

By the help of this article i come to a solution using babel.

1. Install these packages as dev dependencies:

   npm i --save-dev babel-jest @babel/core @babel/preset-env

2. In the root level of your project, create a .babelrc file and add the following:

   {presets:["@babel/preset-env"]}

Then you can use ES6 imports in your test files