importation de jetons inattendue lors de l'utilisation de Mocha avec Babel

Question

Je sais que c'est, en quelque sorte, une question en double, mais aucun des conseils que j'ai trouvé jusqu'à présent n'a aidé, c'est pourquoi j'ai décidé de demander à nouveau.

J'ai créé un test simple dans Mocha, et quand j'essaie de l'exécuter, je continue d'obtenir l'erreur unexpected token import. J'ai essayé beaucoup de solutions différentes trouvées ici et ailleurs, mais aucune d'elles ne semble être pertinente à mon cas. Depuis que je suis un programmeur de niveau junior, je n'ai pas compris toutes les réponses que j'ai trouvées et je suis donc incapable de tous les énumérer ici. Le conseil qui a été donné le plus souvent, cependant, était d'utiliser --compilers js:babel-core/register. Ceci, cependant, n'a pas fonctionné dans mon cas. Ci-dessous mon 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" 
    } 
}` 

mon .babelrc:

"presets": [ 
    "es2015", "react", "env" 
    ], 
    "plugins": ["transform-class-properties"] 

et mon 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] 
} 

-ce que quelqu'un ici a une idée s'il est possible d'exécuter des tests Mocha avec cette configuration à tout? Et si oui, quelqu'un sait-il comment?

Un grand merci pour tous les conseils!

Answer 1

Vous tests de confusion avec le faisceau. webpack regroupe votre code via vos chargeurs configurés, qui sont chargés de le transformer si vous le demandez. Lorsque vous exécutez vos tests, vous passez par webpack, vous les exécutez sur moka, qui est une entité distincte. Vous devez indiquer explicitement à mocha que vous devez transformer le code que vous testez (et les tests eux-mêmes, probablement) en un langage qu'il comprend.

Pour ce faire, en utilisant les dépendances que vous avez déjà installé, vous feriez:

mocha --compilers js:babel-core/register

Plus d'informations sur this blog post, entre autres.

Answer 2

J'ai eu le même problème, je viens de commencer à exiger babel/core explicitement:

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

Answer 3

Je ne pense pas que cela aidera tous ceux qui sont confrontés à ce problème, mais depuis que j'ai posté la question, je partage également la solution qui m'a aidé. J'ai d'abord essayé d'exécuter Mocha avec la commande suivante, comme suggéré dans les réponses ci-dessus: mocha --require babel-core/register --compilers js:babel-core/register. Ceci, cependant, a causé un problème différent, car j'ai continué à obtenir l'erreur suivante: import transformCss, { getStylesForProperty } from '.'; SyntaxError: Unexpected token import. Il s'est avéré, cependant, que l'erreur a été causée par un fichier dans le dossier node_modules. J'ai donc fait le chemin dans la commande plus spécifique pour empêcher Mocha de regarder node_modules (dans mon cas c'était app/**/*.test.js au lieu de **/*.test.js), et maintenant ça marche bien maintenant.