This question already has answers here:
Babel unexpected token import when running mocha tests
(17 answers)
Closed 6 years ago.
I am using the least minimal setup for a react application:
Webpack
Babel
React + Flux
Mocha & Chai for testing
I want to test my app now.
I have a .babelrc with the following content:
{
"presets": ["es2015"],
"ignore": false
}
And my test looks like this:
import { expect, assert } from 'chai';
import AppStore from '../src/js/stores/app-store';
describe('app store', () => {
assert.equal(3,3);
});
When I comment the second import out, it works.
When I import my AppStore, I am getting this error message:
(function (exports, require, module, __filename, __dirname) { import { dispatch, register } from '../dispatchers/app-dispatcher';
^^^^^^
SyntaxError: Unexpected token import
So, I am apparently transpiling the test.js file, but the imports won't transpile to ES5.
What can I do, how does a minimal setup look like (without using Grunt
or whatever).
EDIT: My node scripts inside the package.json look like this:
"scripts": {
"dev": "webpack && webpack-dev-server",
"test": "mocha --compilers js:babel-core/register --recursive"
},
I ran into that same issue. Having tried every other solution on stackoverflow and beyond, this simple config on package.json did it for me:
"babel": {
"presets": [
"es2015"
]
}
All my ES6 imports worked after that.
By the way, I had this same configuration inside webpack.config.js, but apparently this was the only way to make it work for mocha testing as well.
Related
I'm currently experimenting an issue with my new React project using React and GraphQL Apollo. Here is my stack :
Webpack to build/dev to project
Babel to transpile javascript/jsx files
Jest to run tests
Enzyme to test my react components
The issue: When I run my tests, it seems that Apollo react client is not transpiled and throw tests :
pp/containers/App/__tests__/App.test.jsx
● Test suite failed to run
/Users/utilisateur/Project/TrAVis/TrAVis/node_modules/react-apollo/graphql.js:19
import { Component, createElement } from 'react';
^^^^^^
SyntaxError: Unexpected token import
1 | import React, { Component } from 'react';
> 2 | import graphql from 'react-apollo/graphql';
3 | import { bool, object, shape } from 'prop-types';
4 |
5 | import getUserQuery from './query';
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
at Object.<anonymous> (app/containers/App/App.jsx:2:16)
at Object.<anonymous> (app/containers/App/__tests__/App.test.jsx:4:12)
My jest configuration is :
module.exports = {
verbose: true,
moduleNameMapper: {
'\\.(css)$': 'identity-obj-proxy',
},
transform: {
'^.+\\.(js|jsx)$': 'babel-jest'
}
};
and my .babelrc is simply :
{
"presets": [
"react",
"es2015"
]
}
I found this issue https://github.com/facebook/jest/issues/3202 but it seems that the solution doesn't work with my project.
Can you help me?
Thank you,
SLedunois
You need to configure jest to handle es6 imports using babel-jest.
Add babel-jest to your project using the following command in your terminal.
npm install --save-dev jest babel-jest
In your jest.config.js file include the following under transform.
transform: {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
},
Also make sure you are importing react-apollo correctly.
Currect version 2.1.9 at time of writing imports using the following syntax.
import { graphql } from 'react-apollo';
By default Jest won't transform the contents of your node_modules folder, where your installation of Apollo resides.
There is a config option for Jest, called transformIgnorePatterns that provides the ability to change this behavior in order to transform some of your dependencies present in node_modules.
In your case, you need to whitelist Apollo so that Jest transforms it before running your tests:
"transformIgnorePatterns": ["node_modules\/(?!(react-apollo))"]
What happens here is that Jest will ignore all the contents of node_modules except react-apollo, which will get transformed with Babel. That way you should stop seeing the error you are getting.
I'm using the code splitting feature of webpack, but it seems that jest doesn't recognize the import() function:
import('myModule').then(function (myModule) {
^^^^^^
SyntaxError: Unexpected token import
I don't have any special setup. My npm test script is simply run jest "test": "jest"
How can I make it work?
I'm using the latest version of jest 20.0.4 and babel-jest 20.0.3
Oh I just found the answer.
Simply install this plugin: https://github.com/airbnb/babel-plugin-dynamic-import-node and add it to the .babelrc file:
{
...
"env": {
"test": {
"plugins": ["dynamic-import-node"]
}
}
}
I'm getting an error saying "unexpected token export" when trying to compile some es6 code using "babel-cli" with the presets "es2015" and "stage-2". I'm trying to export a function from the "test.js" file and import it in the "index.js" file but for some reason it doesn't accept "export" in "test.js".
Each module is installed locally, so I run it from the package.json "scripts" using "build: babel server/index.js -o server/index.babel.js".
My ".babelrc" file consists of:
{
"presets": ["es2015", "stage-2"]
}
test.js:
const test = (msg) => {
console.log(msg)
};
export default test;
index.js:
index.js:
import test from './test'
test("Hello")
Any help is much appreciated.
Your code looks fine, and the fact that you're getting that error means that it is reading the files properly. Make sure that you downloaded stage-2 correctly, but I think your error is in that export default is still in stage-1.
Run npm install --save-dev babel-preset-stage-1 and add stage-1 to your presets.
That should do it. Here's a link to https://github.com/leebyron/ecmascript-export-default-from and https://github.com/leebyron/ecmascript-export-ns-from
I followed the docs to create my first test using ava but it doesn't seem to run properly. I get the error below. I tried adding import 'babel-register'; at the top of the file, and it works, but only if I run one specific test file. e.g. ava ./test/helpers/test_helper.js. Running ava on its own though... results in the import error below. Does anyone else know how to fix this? The getting started guide uses ES6 import and I have no idea why mine doesn't just work.
(function (exports, require, module, __filename, __dirname) { import
test from 'ava';
^^^^^^ SyntaxError: Unexpected token import
test.js
import test from 'ava';
test(t => {
t.deepEqual([1, 2], [1, 2]);
});
there is a far easier way to work with ES module for AVA
$ npm install esm --save-dev
Then in your package.json add
{
"ava": {
"require": [
"esm"
]
}
}
Babel never works correctly, I spend more time on debugging the tool then my code with all this pile of CS everyday!
Add to your package.json
"ava": {
"files": [
"test/**/*.js"
],
"require": [
"babel-register"
],
"babel": "inherit"
},
Your .babelrc
{
"presets": ["es2015"]
}
And then your imports should work.
add this to your package.json
"ava": {
"babel": true
}
e.g.
https://github.com/e2e-boilerplate/selenium-webdriver-es-modules-babel-ava/blob/master/package.json
https://github.com/e2e-boilerplate/puppeteer-es-modules-babel-ava/blob/master/package.json
For me it was enough to just add
"type": "module",
to my package.json
in order to make
import test from 'ava';
test('foo', t => {
t.pass();
});
run correctly.
After you have yarm/npm installed it, did you run ava --init?
In package.json, what does the command say?
If you run (if you use npm) npm run test, it should execute the command in your package.json.
If you then have any .js (ES6) in your test directory, it should execute it (example is also on their github page https://github.com/avajs/ava).
You don't need to add all of that which is mentioned in the above comment.
These commands should get you a working run:
mkdir avatest
cd avatest
npm init
npm install --global ava (you probably did this already)
npm install --save-dev ava
ava --init
touch test/test.js
atom test/test.js (pasted your script)
npm run test
> 1 passed
I am using Babel in my project. The thing is, I have this line of code in my server.js:
import schema from "./data/schema";
(data/schema.js is in ES2015 syntax).
And when I am trying to compile my server.js with babel, like this:
babel -o server_production.js --minified server.js
it produces a new file without errors and replaces import instruction with require. But the thing is, when I am trying to run my babel-compiled server.js with node, it complains about data/schema.js, because it wasn't transpiled into ES5, only required (the exact error is Unexpected token "import", because I am using some other imports in data/schema.js).
So, the question is: how can I compile my file and all the files it imports into one file? I tried babel -o server_production.js --minified data/schema.js server.js, but that didn't work either.
Babel doesn't bundle dependencies by default. You'll need to use a module bundler like rollup.
To do this, you'll need to define a rollup config similar to this one:
rollup.config.js
import babel from 'rollup-plugin-babel';
import babelrc from 'babelrc-rollup';
export default {
entry: 'server.js',
dest: 'server_production.js',
plugins: [
babel(babelrc())
]
};
This works with the package.json file defined below:
{
"scripts": {
"rollup": "./node_modules/.bin/rollup -c"
},
"devDependencies": {
"babel-cli": "6.14.0",
"babel-plugin-external-helpers": "6.8.0",
"babel-preset-es2015": "6.14.0",
"babelrc-rollup": "3.0.0",
"rollup": "0.35.10",
"rollup-plugin-babel": "2.6.1"
}
}
You execute the command npm run rollup -c to bundle and compile the files.
You'll find an example here: https://ide.c9.io/ifeanyidev/babel-rollup-example
You can use the following solution to compile all included files into one using Babel:
npx babel src --out-file script-compiled.js