使用摩卡與Babel時意外的令牌導入

我知道這是一個重複的問題，但我發現的提示迄今爲止都沒有幫助，這就是爲什麼我決定再次提問。使用摩卡與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] 
}

沒有人在這裏有任何想法，如果有可能與此配置在運行摩卡測試所有？如果是這樣，有誰知道如何？

非常感謝所有提示！

來源

2017-09-16 maciek

你混淆同捆的測試。 webpack通過配置的加載器捆綁您的代碼，如果您請求它，它負責轉換它。當你運行你的測試時，你通過webpack訪問而不是，你在摩卡上運行它們，這是一個獨立的實體。您需要明確地告訴mocha您需要將您正在測試的代碼（以及測試本身，可能）轉換爲它理解的語言。

爲了做到這一點，使用您已經安裝的依賴關係，你會怎麼做：

mocha --compilers js:babel-core/register

更多信息this blog post，等等。

來源

2017-09-16 19:13:42 vcanales

謝謝！這是我用這個命令運行Mocha時得到的結果：'從'。'導入transformCss，{getStylesForProperty}; SyntaxError：意外的令牌導入。你有任何線索如何解決這個問題:-)？ – maciek

好的，問題解決了 - 如果感興趣，請看我自己的答案。儘管你的命令有效 - 我只是忽略了一些顯而易見的事情，但因爲這也可能發生在其他用戶身上，所以我決定發佈我自己的答案。 – maciek

@maciek，我建議你接受你自己的答案，然後，因爲我並沒有真正解決這個問題！順便說一句。很容易忽略像錯誤的道路，良好的捕捉。 – vcanales

我有同樣的問題，然後我就開始要求巴貝爾/核心明確：

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

來源

2017-09-16 18:46:46 justadudewhohacks

謝謝！不幸的是，當我使用這個命令運行mocha時，出現上述錯誤：'。'從'。'導入transformCss，{getStylesForProperty}; SyntaxError：意外令牌導入'，我不知道如何從中取出:-) – maciek

解決 - 請看我自己的答案張貼如下。你的回答沒有任何問題，但因爲我雖然其他用戶可能會忽略我也沒有注意到的內容，但我在下面發佈了更長的解釋。另外，你建議我嘗試的命令也適用，但是，當我解決了我的答案中描述的問題時，它也可以在沒有'--require babel-core/register'的情況下運行。再次感謝！ – maciek

我不認爲這會幫助每個人都面臨這個問題，但自從我發佈了這個問題，我也分享了幫助我的解決方案。我首先嚐試使用以下命令運行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）尋找，現在它現在可以正常工作。

來源

2017-09-18 07:11:30 maciek

不幸的是，這不是我的問題。我* ** **在ES6中編寫的** my **測試中出現'Unexpected token import'錯誤。就好像所有這些'--require'和'--compilers' params完全不能說服mocha使用babel來加載測試。 –

使用摩卡與Babel時意外的令牌導入

回答

相關問題