开玩笑不解析 es6: SyntaxError: Unexpected token import

Question

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

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

相关 package.json 脚本：

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

相关 package.json 部门：

"@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),
  }),
],

配置/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

我遇到了类似的情况，我想用 jest 测试一个 React 组件 .js 文件，但它失败了，因为该组件导入了一个 .css 样式表。我在 Webpack 中使用 Babel。

根据接受的答案@sdgluck，我必须添加一个babel.config.js：

1.

module.exports = {
    presets: ['@babel/preset-env', '@babel/preset-react']
};

2.我还安装了babel-jest 作为开发依赖项

3.然后我通读了jest webpack guide

4. 这导致我向我的 package.json 添加了一个“jest”属性来模拟文件和样式表：

"jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }

5. 然后我必须在指定的路径创建模拟文件（你可以使用任何你想要的路径，这些只是来自他们的文档）：

// __mocks__/styleMock.js

module.exports = {};

// __mocks__/fileMock.js

module.exports = 'test-file-stub';

然后它起作用了:)

Answer 2

我有一些有用的信息，可以作为以后看到这个问题的人的参考。

默认情况下，jest 配置中的 transformIgnorePatterns 为 ["/node_modules/", "\.pnp\.[^\/]+$"]

如果某些人的问题是由 node_modules 中的某些代码引起的，并且没有覆盖此值，babel-jest 仍然无法正常工作。

也许像这样的正确值 "/node_modules/(?!(your-third-part-es-module-code|others-es-lib))"

Answer 3

你需要做两件事：

1. 创建一个 Babel 配置文件 (babel.config.js):

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

   当使用 JS Babel 配置（例如，与 .babelrc 相对）时，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：

   这个 repo 包含我们所谓的“bridge”包，旨在简化使用“babel-core”作为 Babel 6 对等依赖项的库的过渡。

   Babel 7 过渡到作用域的问题是，如果一个包依赖于 Babel 6，他们可能希望同时添加对 Babel 7 的支持。因为 Babel 7 将作为 @babel/core 而不是 babel-core 发布，所以维护者没有办法在不进行重大更改的情况下进行转换。例如