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

时间:2017-09-16 15:16:37

标签: webpack mocha

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

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

非常感谢所有提示!

4 个答案:

答案 0 :(得分:1)

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

mocha --require @babel/register

答案 1 :(得分:1)

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

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

mocha --compilers js:babel-core/register

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

答案 2 :(得分:1)

我不认为这会帮助每个人面对这个问题,但自从我发布了这个问题以来,我也分享了帮助我的解决方案。我首先尝试使用以下命令运行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),现在它现在正常工作。

答案 3 :(得分:0)

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

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