2017-09-16 284 views
1

我知道这是一个重复的问题,但我发现的提示迄今为止都没有帮助,这就是为什么我决定再次提问。使用摩卡与Babel时意外的令牌导入

我在摩卡创建了一个简单的测试,当我尝试运行它时,我不断收到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] 
} 

没有人在这里有任何想法,如果有可能与此配置在运行摩卡测试所有?如果是这样,有谁知道如何?

非常感谢所有提示!

回答

1

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

为了做到这一点,使用您已经安装的依赖关系,你会怎么做:

mocha --compilers js:babel-core/register

更多信息this blog post,等等。

+0

谢谢!这是我用这个命令运行Mocha时得到的结果:'从'。'导入transformCss,{getStylesForProperty}; SyntaxError:意外的令牌导入。你有任何线索如何解决这个问题:-)? – maciek

+0

好的,问题解决了 - 如果感兴趣,请看我自己的答案。尽管你的命令有效 - 我只是忽略了一些显而易见的事情,但因为这也可能发生在其他用户身上,所以我决定发布我自己的答案。 – maciek

+0

@maciek,我建议你接受你自己的答案,然后,因为我并没有真正解决这个问题!顺便说一句。很容易忽略像错误的道路,良好的捕捉。 – vcanales

0

我有同样的问题,然后我就开始要求巴贝尔/核心明确:

mocha --require babel-core/register --compilers js:babel-core/register 
+0

谢谢!不幸的是,当我使用这个命令运行mocha时,出现上述错误:'。'从'。'导入transformCss,{getStylesForProperty}; SyntaxError:意外令牌导入',我不知道如何从中取出:-) – maciek

+0

解决 - 请看我自己的答案张贴如下。你的回答没有任何问题,但因为我虽然其他用户可能会忽略我也没有注意到的内容,但我在下面发布了更长的解释。另外,你建议我尝试的命令也适用,但是,当我解决了我的答案中描述的问题时,它也可以在没有'--require babel-core/register'的情况下运行。再次感谢! – maciek

0

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

+1

不幸的是,这不是我的问题。我* ** **在ES6中编写的** my **测试中出现'Unexpected token import'错误。就好像所有这些'--require'和'--compilers' params完全不能说服mocha使用babel来加载测试。 –