使用 Svelte + Vite 应用程序加载 babel.config 错误

Question

I'm building a new app with Svelte and Vite and I would like to use a jest test with it. I configured it as usual but I have this information about an error:

tests/App.spec.js
  ● Test suite failed to run

    /Users/ewakadziolka/Desktop/svelte/aloes/babel.config.js: Error while loading config - You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.

      at loadCjsOrMjsDefault (node_modules/@babel/core/lib/config/files/module-types.js:82:13)
          at loadCjsOrMjsDefault.next (<anonymous>)
      at readConfigJS (node_modules/@babel/core/lib/config/files/configuration.js:215:47)
          at readConfigJS.next (<anonymous>)
      at Function.<anonymous> (node_modules/@babel/core/lib/gensync-utils/async.js:27:3)
      at evaluateSync (node_modules/gensync/index.js:251:28)
      at Function.sync (node_modules/gensync/index.js:89:14)
      at sync (node_modules/@babel/core/lib/gensync-utils/async.js:78:25)
      at sync (node_modules/gensync/index.js:182:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.681 s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

An App. svelte for a moment is very easy:

<main>
  <h1>Hello word!</h1>
</main>

my babel.congig.js is like this:

module.exports = { presets: [["@babel/preset-env", { targets: { node: "current" } }]],  
};

and my package.json like this:

{
  "name": "aloes",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "jest --watch"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.18.9",
    "@sveltejs/vite-plugin-svelte": "^1.0.1",
    "@testing-library/dom": "^8.16.0",
    "@testing-library/svelte": "^3.1.3",
    "@testing-library/user-event": "^14.2.6",
    "babel-jest": "^28.1.3",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "svelte": "^3.49.0",
    "svelte-jester": "^2.3.2",
    "vite": "^3.0.0"
  },
  "jest": {
    "transform": {
      "^.+\\.svelte$": "svelte-jester",
      "^.+\\.js$": "babel-jest"
    },
    "testEnvironment": "jsdom"
  }
}

This configuration worked very well when I used rollup to build an app.

Answer 1

I found a solution. I changed babel.config.js to babel.config.cjs

module.exports = {
  presets: [
     [
        '@babel/preset-env',
        {
           targets: {
              node: 'current'
           }
        }
     ]
  ]
};

and now it works: