玩笑未解析es6：SyntaxError：意外的令牌导入

Question

我正在尝试通过我的webpack项目设置Jest。当我运行测试时，Jest抱怨说它无法读取es6代码。Babel似乎无法转换我的测试文件。

我尝试了在互联网上找到的各种解决方案，但仍然感到困惑。也许其他人具有更多Babel / Webpack知识，可以查看我的配置并帮助我。

相关的package.json脚本：

{
    "test": "jest --no-cache --config config/jest.config.js"
}

相关的package.json deps：

"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/preset-env": "^7.3.1",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.0.0",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"jest": "^24.0.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"

config / webpack.config.js：

entry: './src/index.js',
mode: isProduction ? 'production' : 'development',
devtool: isProduction ? 'none' : 'inline-source-map',
bail: true,
devServer: {
  contentBase: 'build',
  compress: true,
  port: 3000,
},
output: {
  path: path.resolve(__dirname, 'build'),
  filename: '[name].[chunkhash].js',
},
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: [
            '@babel/preset-env',
            '@babel/preset-react',
            '@babel/preset-flow',
          ],
          plugins: [
            'babel-plugin-styled-components',
            '@babel/plugin-proposal-class-properties',
          ],
        },
      },
    },
  ],
},
plugins: [
  new HtmlWebpackPlugin({
    template: 'src/index.html',
  }),
  new webpack.DefinePlugin({
    'process.env': JSON.stringify(process.env),
  }),
],

config / jest.config.js

module.exports = {
  verbose: true,
  rootDir: '../',
  setupFiles: ['./config/jest.setup.js'],
  transform: {
    '^.+\\.js?$': 'babel-jest',
  },

config / jest.setup.js

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

开玩笑的错误：测试套件无法运行

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

...

Details:

/<...projectpath>/config/jest.setup.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Enzyme from 'enzyme';
                                                                                         ^^^^^^

SyntaxError: Unexpected token import

我想要一些工作正常的测试跑步者！我正在猜测我的转变：babel-jest在我的jest.config.js中什么也不做...

Answer 1

您需要做两件事：

1. 创建一个Babel配置文件（babel.config.js）：

   这是必需的，因为它babel-jest依赖于传统的Babel配置文件，而不是webpack。从版本7开始，Babel已将JS配置支持为babel.config.js。

   使用JS Babel配置时（.babelrc例如，与a相反），Jest还会在中编译模块node_modules。按照惯例，AFAIK必须位于项目的根目录中，并附带jest配置文件。

   这是基于webpack.config.js文件中Babel选项的配置：

   // babel.config.js
   module.exports = {
     presets: [
       '@babel/preset-env',
       '@babel/preset-react',
       '@babel/preset-flow',
     ],
     plugins: [
       'babel-plugin-styled-components',
       '@babel/plugin-proposal-class-properties',
     ]
   }
   

2. 安装babel-core桥版本：

   npm install babel-core@7.0.0-bridge.0 --save-dev
   

   从github.com/babel/babel-bridge：

   此仓库包含我们所谓的“桥接”程序包，该程序包旨在简化将“ babel-core”用作Babel 6的对等依赖项的库的过渡。

   Babel 7过渡到范围的问题是，如果软件包依赖Babel 6，则他们可能希望同时添加对Babel 7的支持。由于Babel 7将以@ babel / core而不是babel-core的形式发布，因此维护人员没有进行重大更改就无法进行该过渡。例如