首页 文章

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

提问于
浏览 次
29

这是我在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，这是我需要的一切让宝贝工作的神奇之处 .

无论如何，这个测试：

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●测试套件无法运行/Users/shooshte/PersonalProjects/surviveJS/app/tests/Landing.component.test.js:1
（{ “对象<匿名> . ”：功能（模块，出口，需要，目录名，文件名，全球，笑话）{进口
从'反应'反应; ^^^^^^ SyntaxError：transformAndBuildScript上的意外标记导入（node_modules / jest-runtime / build / transform.js：320：12）

我究竟做错了什么？

reactjs babeljs jestjs

5 回答

  • 34

    以下.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",
 ...
    回复于
  • 0

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

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

    即使指定了 babel-env ，我仍然得到错误 . 为了解决这个问题，我不得不删除 "modules": false 标志 .

    回复于
  • 3

    Jest将env变量设置为test，所以我必须将我的预设添加到.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"]
    }
  }
}
    回复于
  • 1

    你需要安装babel-jest . 我有同样的问题 .

    转到你的app目录，添加babel-jest

    祝好运！

    回复于
  • 2

    每年的预设仅汇编当年批准的内容 . babel-preset-env取代es2015，es2016，es2017，最新

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

    • 您必须使用 npm install 安装 babel-preset-env .

    • 在您的 .babelrc 中，您应该相应更新：

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

    有关Babel plugins official Documentation的更多信息 .

    ☝️请记住阵列中插件/预设的顺序很重要 .

    回复于

相关问题