jest: 测试套件无法运行，语法错误：意外的标记“import”。

Question

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

"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"
      ]
    }
  }
}

根据在jest的入门页面找到的文档，这就是让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)

我做错了什么？

- Miha Šušteršič

Answer 1

Jest将环境变量设置为测试，因此我不得不将我的预设添加到.babelrc文件中的环境设置中:

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

- Miha Šušteršič

---

注意：对于一个简单的React项目，不需要插件部分。 - bhathiya-perera

Answer 2

每个年度预设只编译该年份批准的内容。babel-preset-env替换了es2015、es2016、es2017和latest。基于此，在最新的配置中，您必须使用/替换您的es2015插件/预设和任何一个esX到新的env。

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

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

更多关于Babel插件官方文档的信息。

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

- Fernando Cea

Answer 3

Jest无法处理导入，所以需要使用转换插件，这就是为什么我必须添加插件：

babel-plugin-dynamic-import-node 并更新我的Babel设置，告诉Jest使用此插件来正确转换代码。

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

GitHub讨论串

- sergioviniciuss

Answer 4

在我的情况下，我有以下的.babelrc配置：

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

尽管已经指定了babel-env，我仍然遇到了错误。为了解决这个问题，我必须删除"modules": false标志。

- Tomasz Mularczyk

---

如Jest文档中所述，你需要在Jest中启用它。你只能在测试环境中启用它。请参考Jest的"入门指南"(无法在此处粘贴代码)。 - adriendenat

Answer 5

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

前往您的应用程序目录，运行命令yarn add babel-jest

祝好运！

- Pengfei Chen

Answer 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",
 ...

- Roman