Code splitting `import` breaks Jest tests - javascript

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"]
}
}
}

Related

Why is Parcel build creating an import that fails when I try to execute the built module?

Preamble
I'm very new to parcel and using bundlers so I could be doing something completely wrong.
I followed the guidance provided at Building a library with Parcel since I am trying to bundle the server-side code which will be executed by node.js
My package.json contains the following(removed uneccessary details):
{
"source":"bin/server.js",
"module":"dist/server.js"
"scripts":{
"build": "parcel build"
}
"type":"module"
}
Main Problem
When I build my application with npm rum build it generates everything just fine, no errors are thrown and it only takes about 2 seconds.
Then when I try to run the application with "node .\bin\server.js" it throws the following error.
import {exit as $a7IyA$exit, on as $a7IyA$on} from "process";
------------------------------^^--------------------------------------------------
SyntaxError: The requested module 'process' does not provide an export named 'on'
For additional context, the application does run as expected before I bundle with parcel and the server.js file does include the following as the first import (where error is thrown).
import {exit as $a7IyA$exit, on as $a7IyA$on} from "process";
Update:
After reviewing the Targets documentation, this does make me more confident that Parcel can be used for backend bundling and I tried updating my package.json to the following:
{
"targets": {
"server": {
"source": "bin/server.js",
"context": "node",
"distDir": "./dist",
"includeNodeModules": true,
"outputFormat": "esmodule"
}
},
"scripts":{
"build": "parcel build"
}
"type":"module"
}
This did get me further, but I'm now getting the following error:
Uncaught ReferenceError ReferenceError: $2az4q$relative is not defined

vuejs unit testing, default installation says no test specified

On Windows 7. Installed a fresh vue project using the VueJS UI utility. Set unit testing / Jest enabled. Added babel.
running "npm test" at the command line returns 'Error: no test specified'.
I have the typical "scripts": { "vue-cli-service test:unit" } set up in my package.json file.
jest.config.js has the expected matching pattern:
{ testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
] }
So, it's not finding even the example file located in tests/unit/example.spec.js.
Curiously, I CAN get it to find tests I run directly from the node_modules directory, using vue-cli-service:
node_modules\.bin\vue-cli-service test:unit
from there I get a babel transpile problem (it fails to recognize the ES6 import command in the example.spec.js file) .. which is another nightmare, perhaps not for this post.
Tried updating npm (using 6.9.2). Vue cli version is 3.8.2. Tried deleting the node_modules directory.
Any help is most appreciated.
After running npm test, the error looks like this:
> testing_research#0.1.0 test C:\Users\allan.luchenitser\sandbox\testing_research
> echo 'Error: no test specified'
'Error: no test specified'
thanks again,
Your package.json's "scripts" should contain a named script. Example:
"scripts": {
// other scripts...
"test:unit": "vue-cli-service test:unit"
}
In addition, you have to configure jest to parse any .js or .ts test files in your project, adding this configuration to your package.json:
"jest": {
"moduleFileExtensions": [
"js",
"ts",
"json",
"vue"
],
"transform": {
".*\\.(vue)$": "vue-jest"
}
}
Now running npm run test:unit should find and run any tests you have in your project.

ES6 import for 'ava' test not working

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

How to compile all included files into one using Babel?

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

How to transpile ES6 imports in Chai? [duplicate]

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.

Categories

Resources