开玩笑：测试套件无法运行，SyntaxError：意外的令牌导入

Posted 2023-02-22

【中文标题】开玩笑：测试套件无法运行，SyntaxError：意外的令牌导入

【英文标题】：jest: Test suite failed to run, SyntaxError: Unexpected token import

【发布时间】：2017-06-03 04:59:27

【问题描述】：

这是我来自 package.json 文件的jest configuration：

"jest": 
    "automock": false,
    "browser": true,
    "moduleNameMapper": 
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    ,
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "transform": 
      "^.+\\.jsx?$": "./node_modules/babel-jest",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileTransformer.js"
    ,
    "testEnvironment": "jsdom",
    "testPathDirs": [
      "./app/tests"
    ],
    "testRegex": ".*.test.js",
    "verbose": true
  

还有位于我根文件夹中的 .babelrc 文件：

  "plugins": ["syntax-dynamic-import", "transform-runtime"],
  "presets": [
    [
      "es2015",
      
        "modules": false
      
    ],
    "react",
    "stage-0"
  ],
  "env": 
    "start": 
      "presets": [
        "react-hmre"
      ]
    
  

根据在开玩笑getting started page 中找到的文档，这就是 babel 工作所需的一切，这很神奇。

不管怎样，这个测试：

import React from 'react';
import shallow from 'enzyme';
import Landing from '../components/Landing.component';

describe('<Landing/>', () => 
  it('should render a header to the page', () => 
    const landing = shallow(<Landing/>);
    expect(landing.find('h1').text()).toBe('This is the Landing component');
  );
);

返回：

FAIL  app/tests/Landing.component.test.js   
 ● Test suite failed to run

   /Users/shooshte/PersonalProjects/surviveJS/app/tests/Landing.component.test.js:1
   ("Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest)import React from 'react';
                                                                                            ^^^^^^
   SyntaxError: Unexpected token import

     at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)

我做错了什么？

【参考方案1】：

Jest 设置了要测试的 env 变量，所以我不得不将我的预设添加到 .babelrc 中的 env 设置中：

  "plugins": ["syntax-dynamic-import", "transform-runtime"],
  "presets": [
    [
      "es2015",
      
        "modules": false
      
    ],
    "react",
    "stage-0"
  ],
  "env": 
    "start": 
      "presets": [
        "react-hmre"
      ]
    ,
    "test": 
      "presets": ["es2015", "react", "stage-0"]
    
  

【讨论】：

注意：简单的 react 项目不需要插件部分。

【参考方案2】：

每个年度预设仅编译当年批准的内容。 babel-preset-env 替换 es2015, es2016, es2017, latest

基于此，在最新配置上，您必须使用/替换 es2015 和任何 esX 的插件/预设为新的：env。

您必须安装babel-preset-env 和npm install。 在您的.babelrc 中您应该相应地更新：

  "presets": [
    "env", 
    "stage-0", 
    "react-native"
  ],
  "plugins": ...

更多关于Babel plugins official Documentation的信息。

☝️ 记住数组中插件/预设的顺序很重要。

【参考方案3】：

就我而言，我有以下 .babelrc 配置：

  "presets": [
    ["env",  "modules": false ],
    "react",
    "stage-2"
  ],
  "plugins": [
    "transform-runtime",
    "transform-class-properties",
    "react-hot-loader/babel"
  ]

即使指定了babel-env，我仍然收到错误消息。要修复它，我必须删除 "modules": false 标志。

【讨论】：

如 Jest 文档中所述，您需要为 Jest 打开它。您只能在测试环境中打开它。检查 Jest “开始”（不能在此处粘贴代码）。

【参考方案4】：

Jest 不处理导入，因此它需要一个转换插件，这就是我必须添加插件的原因：

babel-plugin-dynamic-import-node

并更新我的 babel 设置以告诉 jest 使用此插件正确转换代码：

"env": 
    "test": 
      "plugins" : ["dynamic-import-node"]
    
  

GitHub thread

【参考方案5】：

你需要安装 babel-jest。我遇到了同样的问题。

进入你的应用目录，yarn add babel-jest

祝你好运！

【参考方案6】：

以下 .babelrc 对我有用（不添加）：

  "presets": [["env", 
    "debug": false,
    "modules": false
  ],  "es2015", "stage-0", "react"],
  "plugins": [
    "react-hot-loader/babel",
    "syntax-dynamic-import",
    "dynamic-import-node",
    "transform-class-properties",
    "transform-decorators-legacy"
  ]

package.json 的“devDependencies”部分如下所示：

...
"devDependencies": 
  "babel-cli": "latest",
  "babel-core": "^6.26.3",
  "babel-eslint": "^8.2.3",
  "babel-jest": "^22.4.4",
  "babel-loader": "latest",
  "babel-plugin-dynamic-import-node": "^1.2.0",
  "babel-plugin-lodash": "latest",
  "babel-plugin-syntax-dynamic-import": "^6.18.0",
  "babel-plugin-transform-class-properties": "^6.24.1",
  "babel-plugin-transform-decorators-legacy": "latest",
  "babel-plugin-transform-dynamic-import": "^2.0.0",
  "babel-plugin-transform-flow-strip-types": "^6.22.0",
  "babel-plugin-transform-object-rest-spread": "latest",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.7.0",
  "babel-preset-flow": "^6.23.0",
  "babel-preset-react": "^6.24.1",
  "babel-preset-react-app-babel-7": "^4.0.1",
  "babel-preset-stage-0": "^6.24.1",
 ...