I have a project using react-parcel-app as a template, and I'm trying to integrate Jest but I'm having the following error.
Details:
/home/papaponmx/Projects/prime/src/actions/goals.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { addGoal } from './goals.mjs';
This is what my .babelrc looks like.
{
"presets": [
[
"env",
{"modules": false},
{
"targets": {
"browsers": [
"last 2 versions"
]
}
}
],
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
],
"env": {
"testing": {
"presets": ["es2015", "stage-1", "react" ],
"plugins": [
"lodash",
"transform-runtime",
"transform-es2015-modules-commonjs",
"dynamic-import-node"
]
}
}
}
I understand that parcel is supposed to support ES Modules without configuration, but I don't get the test import s to work.
Here is the link to the repo in case you want to run it locally.
By the help of this article i come to a solution using babel.
Install these packages as dev dependencies:
npm i --save-dev babel-jest #babel/core #babel/preset-env
In the root level of your project, create a .babelrc file and add the following:
{presets:["#babel/preset-env"]}
Then you can use ES6 imports in your test files
Related
I'm trying to add custom serializer in Jest (with Jest docs). And I have an error: "Module custom-serializer in the snapshotSerializers option was not found.".
I tried custom-serializer.js, but this also doesn't work.
Project structure:
src
...
node_modules
utils
custom-serializer.js
jest.config.json
...
jest.config.json:
{
"verbose": true,
"testEnvironment": "jsdom",
"testMatch": [
"**/tests/**/*.js"
],
"moduleDirectories": [
"node_modules",
"utils"
],
"snapshotSerializers": [
"custom-serializer"
]
}
We have recently updated from ava 0.17.0 to version 2.4.0. The old configuration in the package.json no longer works and ava tests now fail.
the old configuration in our package.json looks like the following
"ava": {
"timeout": "10m",
"files": [
"app//*Spec.js",
"lib//*Spec.js",
"*Spec.js"
],
"source": [
"**/*.{js,jsx}"
],
"babel": {
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
]
}
},
Can someone please tell me what is the new configuration required for ava 2.4.0....?
Possibly you need to wrap the current babel value in a "testOptions" object, e.g. "babel": { "testOptions": { "presets": … } }. Hard to say more without seeing your errors.
I have a problem with making Parcel, Jest and Babel work with the same .babelrc
Parcel version: 1.11.0
Jest version: 24.0.0
Node: v10.5.0
Platform: Win 10
.babelrc
{
"env": {
"development": {
"plugins": [
[
"#babel/plugin-transform-runtime",
{
"corejs": 2
}
]
]
},
"test": {
}
},
}
If I move the plugins section to the root of the JSON it works correctly with the web app, however Parcel or Babel for some reason can't recognize the development env even if I set it in the command line.
If run the tests without the environment setup (having the env as above) then I get
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _Promise from "#babel/runtime-corejs2/core-js/promise";
with Jest.
Probably the test setup wouldn't get recognized either, it just works without the babel/plugin-transform-runtime
Using this .babelrc solved it:
{
"env": {
"production": {
"plugins": [
[
"#babel/plugin-transform-runtime",
{
"corejs": 2
}
]
]
},
"development": {
"plugins": [
[
"#babel/plugin-transform-runtime",
{
"corejs": 2
}
]
]
},
"test": {
"plugins": [
]
}
},
}
I have a suite of tests are being run with jest.
- initFromProgressObject.test.js
- nodeifyProgressObject.test.js
- segments.test.js
- uuid.test.js
- volume.progress.test.js
- volume.segment.test.js
The command i use to run the tests is jest --notify. Here is the error I get in just 2 of the files:
/Users/bob/Developer/sedd/sedd-utils/src/tests/uuid.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as uuid from "../utils/uuid";
^^^^^^
SyntaxError: Unexpected token import
All of the files are using import, but only 2 of them are having this issue of Unexpected token import. On another question, I saw that it was important to set the env to test. I have tried that and it didn't change anything.
Here is my .babelrc:
{
"env": {
"es": {
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions"],
"node": "current"
},
"modules": false
}
]
],
"ignore": ["**/*.test.js", "**/tests/*"]
},
"test": {
"presets": ["env"]
},
"cjs": {
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions"],
"node": "current"
}
}
]
],
"ignore": ["**/*.test.js", "**/tests/*"]
}
}
}
The jest config is just the default.
Any ideas?
Goal: To be able to use es6 import, export default, etc...
What I have done is include a .babelrc file in the root of my project which contains:
{
"presets": ["env", "react", "stage-0", "stage-1"],
"plugins": ["transform-object-rest-spread"]
}
I looked at the docs on babel and for node it said that all I would have to do is include the preset "env" which I do, but when I try to do an statement like:
import { data } from './data'
I get an unexpected token error on the import statement, so I assume I am not doing something correctly.
Typical webpack.config.js
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
...
]
}
I suggest you update .babelrc to the following.
{
"presets": [
[
"env",
{
"modules": false,
"loose": true
}
],
"react"
],
"plugins": [
"transform-object-rest-spread"
]
}
for more goodies decorators / function binding / class props etc,
{
"presets": [
[
"env",
{
"modules": false,
"loose": true
}
],
"react"
],
"plugins": [
"transform-object-rest-spread",
"transform-function-bind",
"transform-class-properties",
"transform-decorators-legacy",
]
}