reactjs Jest -语法错误:无法在模块外部使用import语句

yshpjwxd  于 2022-11-29  发布在  React
关注(0)|答案(6)|浏览(602)

我正在使用jest:24.9.0,没有任何配置,从create-react-app全局安装。在这些文件中,我正在使用es6模块。使用"test": "react-scripts test"时没有错误
然而,当我将jest"test": "jest --config jest.config.js",一起使用时,我看到以下错误。

FAIL  src/configuration/notifications.test.js
  ● Test suite failed to run

    /var/www/management/node/src/configuration/notifications.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import notifications from './notifications';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module
yjghlzjz

yjghlzjz1#

Jest不支持ES6模块,因此当你直接用Jest运行测试时会抛出这个错误。如果你想像那样运行,那么你必须添加babel。
另一方面,当你用react-scripts运行测试时,它在幕后使用babel来传输代码。
在较新版本的jest中,babel-jest现在由Jest自动加载并完全集成
希望这能回答你的问题。
"在玩笑中加入巴别塔"

安装

babel-jest现在由Jest自动加载并完全集成。只有在使用babel-jest转换TypeScript文件时才需要执行此步骤。

npm install --save-dev babel-jest

用法

package.json文件中进行以下更改:

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
  }
}

创建.babelrc配置文件

在项目根目录中创建一个babel.config.json配置,并启用一些presets
首先,您可以使用env预设,它可以为ES 2015+启用转换

npm install @babel/preset-env --save-dev

要启用预设,您必须在babel.config.json文件中定义它,如下所示:

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

查看巴别塔官方网站上的更多详细信息

nvbavucw

nvbavucw2#

正如上面的答案所描述的,Jest不支持ES6模块。因此,我们需要将代码转换为支持的模块类型。我们可以使用babel-jestts-jest。为了简单起见,我建议使用ts-jest

步骤1:安装:

npm i -D ts-jest @types/jestyarn add --dev ts-jest @types/jest

步骤2:配置

选项1:创建jest配置文件jest.config.js

module.exports = {
    transform: {
        '^.+\\.(ts|tsx)$': 'ts-jest',
    },
};

选项2:将jest配置添加到package.json

"jest": {
    "transform": {
        "^.+\\.(ts|tsx)$": "ts-jest"
    }
}

**步骤3:执行您的脚本。**现在一切都应该设置好了。

e5nqia27

e5nqia273#

由于jest不能很好地使用esmodules,您需要在jest.config.js中添加这些配置,以告知Jest改用commonJS构建

moduleNameMapper : {
        '^react-dnd$': 'react-dnd/dist/cjs',
        '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
        '^dnd-core$': 'dnd-core/dist/cjs',
}
lstz6jyr

lstz6jyr4#

当您搭配ECMAScript使用Typescript时,最简单的解决方案是使用ts-jest,这是一个TypeScript前置处理器:
1.安装

npm i -D ts-jest @types/jest

1.执行测试

jest

npmgithub

frebpwbc

frebpwbc5#

错误

SyntaxError: Cannot use import statement outside a module

也可能来自node_modules下的某个导入库,例如

...\node_modules\node-fetch\src\index.js:9
    import http from 'node:http';
    ^^^^^^

对我来说,技巧是在jest config中使用transformIgnorePatterns选项:

transformIgnorePatterns: [
    'node_modules/(?!' + 
        [
            'node-fetch',
            'fetch-blob',
            'data-uri-to-buffer',
            'jest-runtime',
            'formdata-polyfill'
        ].join('|') +
    ')',
],

另请参阅
How to setup jest with node_modules that use es6

huwehgph

huwehgph6#

我在使用react-scripts运行测试时也收到了同样的错误。

"test": "react-scripts test",

"test": "NODE_OPTIONS=--experimental-vm-modules react-scripts test",

从提供建议此解决方案的链接的错误消息中:

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.

相关问题