与Babel一起使用摩卡咖啡时意外的令牌

Question

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

我在摩卡咖啡中创建了一个简单的测试，当我尝试运行它时，我会不断获得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]
}

是否有人知道是否可以使用此配置进行摩卡咖啡测试？如果是这样，有人知道如何吗？

非常感谢所有提示！

Answer 1

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

mocha --require @babel/register

Answer 2

您将测试与捆绑包混淆。WebPack通过配置的加载程序将代码捆绑在一起，如果您要求它，可以将其转换。当您运行测试时，您 都可以通过webpack，在摩卡岛上运行它们，这是一个独立的实体。您需要明确地告诉摩卡咖啡，您需要将您要测试的代码（以及测试本身）转换为一种它理解的语言。

为了这样做，使用您已经安装的依赖项，您将做：

mocha --compilers js:babel-core/register

有关此博客文章的更多信息。

Answer 3

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

Answer 4

Mocha现在在mocha@7.0.0-esm1中对ESM具有实验支持