Question

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

我在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测试？如果是这样，有谁知道怎么做？

非常感谢所有提示！

Answer 1

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

mocha --require @babel/register

Answer 2

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

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

mocha --compilers js:babel-core/register

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

Answer 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），现在它现在正常工作。

Answer 4

Mocha现在在mocha@7.0.0-esm1：https://github.com/mochajs/mocha/pull/4038#issuecomment-573664595

中为ESM提供了实验性支持。

使用Mocha with Babel时意外的令牌导入

4 个答案: