2017-09-16 285 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來加載測試。 –