将 Mocha 与 Babel 一起使用时出现意外的令牌导入答案

【问题标题】：unexpected token import when using Mocha with Babel将 Mocha 与 Babel 一起使用时出现意外的令牌导入
【发布时间】：2017-09-16 15:16:36
【问题描述】：

我知道这在某种程度上是一个重复的问题，但到目前为止我发现的任何提示都没有帮助，这就是我决定再次提问的原因。

我在 Mocha 中创建了一个简单的测试，当我尝试运行它时，我不断收到 unexpected token import 错误。我在这里和其他地方尝试了许多不同的解决方案，但它们似乎都与我的情况无关。由于我是一名初级程序员，我并不理解我找到的所有答案，因此我无法在此处列出所有答案。不过，最常给出的提示是使用--compilers js:babel-core/register.，但是，这在我的情况下不起作用。下面是我的package.json：

`{
  "name": "beer-guru",
  "version": "1.0.0",
  "description": "A simple app displaying info about various beers",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --hot --open",
    "prettier": "prettier --single-quote --write ./app/**/*.js",
    "lint": "eslint **/*.js",
    "test": "mocha **/*.test.js"
  },
  "keywords": [
    "React.js"
  ],
  "author": "Maciek Maslowski",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.4",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "styled-components": "^2.1.1",
    "styled-tools": "^0.1.4"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "eslint": "^4.4.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-react": "^7.2.1",
    "expect": "21.0.2",
    "html-webpack-plugin": "^2.26.0",
    "mocha": "3.5.3",
    "prettier": "^1.5.3",
    "react-redux": "5.0.6",
    "redux": "3.7.2",
    "supertest": "3.0.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}`

我的.babelrc：

"presets": [
    "es2015", "react", "env"
  ],
  "plugins": ["transform-class-properties"]

还有我的webpack.config.js：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.js'
  ],

  devServer: {
      historyApiFallback: true
  },

  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loaders: ["babel-loader", "eslint-loader"]}
    ]
  },
  plugins: [HtmlWebpackPluginConfig]
}

这里有没有人知道是否可以使用此配置运行 Mocha 测试？如果是这样，有人知道怎么做吗？

非常感谢所有提示！

【问题讨论】：

Mocha 现在原生支持 ESM。 See here了解详情。

标签： webpack mocha.js

【解决方案1】：

我遇到了同样的问题，然后我才开始明确要求 babel/core：

mocha --require @babel/register

【讨论】：

谢谢！不幸的是，当我用这个命令运行 mocha 时，我得到了上面描述的错误：import transformCss, { getStylesForProperty } from '.'; SyntaxError: Unexpected token import，我不知道如何从那里得到它:-)
已解决 - 请参阅下面发布的我自己的答案。您的回答没有任何问题，但是由于我虽然其他用户可能会忽略我也没有注意到的内容，所以我在下面发布了更长的解释。此外，您建议我尝试的命令有效，但是，当我解决了我的答案中描述的问题时，它在没有--require babel-core/register 的情况下也有效。再次感谢！

【解决方案2】：

您将测试与捆绑包混淆了。 webpack 通过您配置的加载器捆绑您的代码，如果您请求，加载器负责转换它。当你运行你的测试时，你不是通过 webpack，你是在 mocha 上运行它们，这是一个独立的实体。您需要明确告诉 mocha，您需要将正在测试的代码（可能还有测试本身）转换为它可以理解的语言。

为了做到这一点，使用您已经安装的依赖项，您可以：

mocha --compilers js:babel-core/register

有关this blog post 等的更多信息。

【讨论】：

谢谢！这是我在使用此命令运行 Mocha 时得到的结果：import transformCss, { getStylesForProperty } from '.'; SyntaxError: Unexpected token import。你知道如何解决这个问题吗:-)？
好的，问题解决了——如果有兴趣，请看我自己的回答。不过，您的命令有效 - 我只是忽略了一些明显的事情，但由于这也可能发生在其他用户身上，我决定也发布我自己的答案。
@maciek，我建议你接受你自己的答案，因为我的并不能真正解决这个特殊问题！顺便提一句。令人惊讶的是，人们很容易忽略一条错误的道路，很好的收获。

【解决方案3】：

我认为这不会对面临此问题的每个人都有帮助，但是自从我发布了这个问题后，我也分享了对我有帮助的解决方案。我首先尝试使用以下命令运行 Mocha，如上面的答案中所建议的那样：mocha --require babel-core/register --compilers js:babel-core/register。但是，这导致了另一个问题，因为我不断收到以下错误：import transformCss, { getStylesForProperty } from '.'; SyntaxError: Unexpected token import。但事实证明，该错误是由node_modules 文件夹中的文件引起的。因此，我使命令中的路径更加具体，以防止 Mocha 查看node_modules（在我的情况下是app/**/*.test.js 而不是**/*.test.js），现在它可以正常工作了。

【讨论】：

不幸的是，这不是我的问题。对于用 ES6 编写的 my 测试，我am 收到“意外令牌导入”错误。就好像所有那些 --require 和 --compilers 参数完全无法说服 mocha 使用 babel 加载测试。

【解决方案4】：

Mocha 现在在 mocha@7.0.0-esm1: https://github.com/mochajs/mocha/pull/4038#issuecomment-573664595 中为 ESM 提供实验性支持

【讨论】：