Im writing tests for an application but i run into the following error when importing certain classes in my tests:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/node_modules/react-redux/es/connect/connect.js:5
import connectAdvanced from '../components/connectAdvanced';
^^^^^^
SyntaxError: Unexpected token import
9 | children: PropTypes.string.isRequired,
10 | translator: PropTypes.func.isRequired
11 | };
| ^
I have not written any tests yet, i only imported the component in my test file:
import {TheComponent} from '../src/components/the-component';
My jest.config.json looks like this:
{
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
},
"setupFiles": [
"raf/polyfill",
"<rootDir>/test/testSetup.js"
]
}
My .babelrc file looks like this and is in the root directory:
{
"presets": [ "react", "es2015", "stage-2" ],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
]
}
My package.json file looks like this:
{
"name": "testError",
"version": "1.0.0",
"scripts": {
"test:jest": "jest --config=jest.config.json --watchAll"
},
"files": [
"dist",
"src"
],
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"eslint": "^5.3.0",
"eslint-plugin-react": "^7.10.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^23.5.0",
"mkdirp": "^0.5.1",
"prettier": "^1.13.7",
"prettier-eslint": "^8.8.2",
"prop-types": "^15.6.0",
"react-test-renderer": "^16.5.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5",
"webpack-merge": "^4.1.4",
"yargs": "^12.0.1"
},
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"css-loader": "^1.0.0",
"eventing-bus": "^1.3.3",
"filesize": "^3.6.1",
"i18next": "^11.5",
"node-sass": "^4.8.3",
"react": "^16.4",
"react-circular-progressbar": "^1.0.0",
"react-dom": "^16.4",
"react-redux": "^5.0",
"react-truncate": "^2.4.0",
"redux": "^4.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.1"
},
"main": "dist/main.js",
"module": "src/index.js"
}
I have tried to put several values in both the transformIgnorePatterns and transform properties in .babelrc but so for no luck.
Does anyone know how i can solve this issue? Any help will be appreciated.
As Mitch commented above,
I added the following to my jest.config file and it worked: "transformIgnorePatterns": [ "node_modules/(?!(react-redux|lodash-es)/)" ]
Related
I am trying to run some tests with Jest, and the project is throwing these errors:-
FAIL src/imports/components/Forms/__tests__/FilterForm.test.jsx
● Test suite failed to run
Plugin/Preset files are not allowed to export objects, only functions. In \node_modules\babel-preset-react\lib\index.js
at createDescriptor (../../../AppData/Roaming/nvm/v10.18.1/node_modules/jest-cli/node_modules/#babel/core/lib/config/config-descriptors.js:178:11)
at Array.map (<anonymous>)
my package.json looks like this:-
"devDependencies": {
"autoprefixer": "6.5.4",
"babel-cli": "6.18.0",
"babel-core": "6.20.0",
"babel-eslint": "7.1.1",
"babel-jest": "18.0.0",
"babel-loader": "^7.1.5",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-remove-prop-types": "0.2.11",
"babel-plugin-transform-runtime": "6.23.0",
"babel-polyfill": "6.20.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-latest": "6.16.0",
"babel-preset-react": "6.16.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.24.1",
"babel-preset-stage-1": "6.16.0",
"browser-sync": "^2.26.12",
"chai": "4.1.2",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"copy-webpack-plugin": "4.2.0",
"coveralls": "2.11.15",
"css-loader": "0.26.1",
"enzyme": "3.3.0",
"enzyme-adapter-react-15.4": "1.0.5",
"eslint": "3.12.2",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-react": "6.8.0",
"eslint-watch": "2.1.14",
"extract-text-webpack-plugin": "2.1.0",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.24.1",
"identity-obj-proxy": "3.0.0",
"jest": "23.4.2",
"json-loader": "0.5.4",
"mockdate": "2.0.1",
"node-sass": "^4.14.1",
"npm-run-all": "4.1.2",
"open": "0.0.5",
"postcss-loader": "1.2.1",
"prompt": "1.0.0",
"react-addons-test-utils": "15.4.1",
"redux-immutable-state-invariant": "1.2.4",
"replace": "0.3.0",
"rimraf": "2.5.4",
"sass-loader": "7.1.0",
"sinon": "4.1.2",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "2.2.1",
"webpack-bundle-analyzer": "2.1.1",
"webpack-dev-middleware": "1.9.0",
"webpack-hot-middleware": "2.13.2",
"webpack-md5-hash": "0.0.5"
},
and the babel config file looks like this:-
{
"presets": [
"react",
"es2015",
"stage-0",
"stage-1"
],
"env": {
"development": {
"presets": [
"latest",
"react-hmre"
],
"plugins": ["transform-runtime"]
},
"production": {
"presets": [
["latest", {
"es2015": {
"modules": false
}
}]
],
"plugins": [
"transform-react-constant-elements",
"transform-react-remove-prop-types"
]
},
"test": {
"presets": [
"latest"
]
}
}
}
This is the FilterForm.test.jsx imports:-
import React from 'react';
import moment from 'moment';
import sinon from 'sinon';
import { expect } from 'chai';
import { shallow, mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15.4';
import { Form } from 'react-bootstrap';
import FilterForm from '../FilterForm';
import TextField from '../../Fields/Text';
From what I was researching, it seems that I have an old babel iteration? If it is, how can I upgrade to the newest? I tried removing babel and re-installing it but did not work.
Any help would be very much appreciated!
Thanks
Jest 24 dropped support for Babel 6. You can either upgrade to Babel 7 or stay on the the Jest 23.x series
I'm trying to server render a react app, I configured babel with preset-env in order to allow the use of import statement but it seems to be not working, ,when I launch the server I get this error :SyntaxError: Cannot use import statement outside a module
package.json :
"babel": {
"presets": [
"react",
"env",
"stage-2"
]
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"eslint": "^3.19.0",
"eslint-plugin-react": "^6.10.3",
"jest": "^19.0.2"
},
"dependencies": {
"babel-cli": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"ejs": "^2.5.6",
"express": "^4.15.2",
"pm2": "^2.4.6",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"webpack": "^2.5.0"
server.js :
app.use("/", (req,res)=>{
const initialContent = serverRender();
res.render("index",{initialContent});
});
serverRender.js :
import React from "react";
import ReactDOMServer from "react-dom/server";
import App from "./components/app";
const serverRender =()=>{
return ReactDOMServer.renderToString(<App/>);
};
export default serverRender;
i am using babel on my server side my package.json has those babel related packages.
"scripts": {
"babel-node": "babel-node ",
"start": "nodemon --exec npm run babel-node -- ./app.js",
},
"devDependencies": {
"babel-polyfill": "^6.26.0",
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-latest": "^6.24.1",
"babel-register": "^6.26.0",
}
for preset i have created .babelrc file
{
"presets": ["env"],
"plugins": [
[
"transform-runtime",
{
"polyfill": false,
"regenerator": true
}
],
]
}
hope it helps
I am new to React and Jest and during my first experiment I got stuck with the following error when running jest --watchAll:
FAIL src/components/App.test.js
● Test suite failed to run
Cannot find module '#babel/preset-register' from '/Users/joaomatos/projects/dummy'
- If you want to resolve "#babel/register", use "module:#babel/register"
at Function.module.exports [as sync] (node_modules/resolve/lib/sync.js:74:15)
at resolveStandardizedName (node_modules/#babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (node_modules/#babel/core/lib/config/files/plugins.js:58:10)
at loadPreset (node_modules/#babel/core/lib/config/files/plugins.js:77:20)
at createDescriptor (node_modules/#babel/core/lib/config/config-descriptors.js:154:9)
at node_modules/#babel/core/lib/config/config-descriptors.js:109:50
at Array.map (<anonymous>)
at createDescriptors (node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
at presets (node_modules/#babel/core/lib/config/config-descriptors.js:47:19)
I installed several babel packages namely babel register, but I cannot find anything else related to #babel/preset-register. My package.json:
{
"name": "dummy",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/preset-env": "^7.7.1",
"acorn": "^7.1.0",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-env": "^1.7.0",
"history": "^4.10.1",
"npm-preset": "^1.5.0",
"parcel": "^1.12.4",
"react": "^16.11.0",
"react-app-polyfill": "^1.0.4",
"react-dev-utils": "^9.1.0",
"react-dom": "^16.6.3",
"react-dropzone": "^10.1.10",
"react-file-drop": "^0.2.8",
"react-flip-move": "^3.0.4",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-scripts": "3.2.0",
"react-switch": "^5.0.1",
"react-test-renderer": "^16.11.0",
"redux": "^4.0.4",
"typescript": "^3.7.2"
},
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html",
"start": "npm run build && live-server dist",
"test": "jest --watchAll"
},
"devDependencies": {
"#babel/core": "^7.7.2",
"#babel/plugin-proposal-class-properties": "^7.7.0",
"#babel/preset-react": "^7.7.0",
"#babel/preset-stage-2": "^7.0.0",
"#babel/register": "^7.7.0",
"babel-loader": "^8.0.6",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1"
}
}
and .babel.rc:
{
"plugins": [
"#babel/plugin-proposal-class-properties"
],
"env": {
"test": {
"presets": [
"env",
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-stage-2",
"#babel/register",
"stage-2",
"react"
],
"plugins": [
"transform-export-extensions",
"transform-class-properties"
],
"only": [
"./**/*.js",
"node_modules/jest-runtime"
]
}
}
And my test:
import React from 'react';
import Enzyme, {shallow} from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import App from './App';
Enzyme.configure({adapter: new EnzymeAdapter()});
test(
'renders without crashing',
() => {
const wrapper = shallow(<App />);
expect(wrapper).toBeTruthy();
}
);
Does anyone know why I am getting this error?
Thank you for your help.
Babel-register is not a preset, hence the error message you are facing. Are you sure you need it for a starter project? Try removing it from the presets array in babel.rc
I'm writing tests for a React application and run into an issue while compiling classes that i import in my test files. When running the test suite
i get the following error:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/node_modules/react-redux/es/connect/connect.js:5
import connectAdvanced from '../components/connectAdvanced';
^^^^^^
I have tried to use babel-jest to transpile using the transform property and the modulePathIgnorePatterns. My jest.config.json looks like:
{
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
},
"setupFiles": [
"raf/polyfill",
"<rootDir>/test/testSetup.js"
],
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
}
my babel.rc file (its in the root directory)
{
"presets": [ "react", "es2015", "stage-2" ],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
]
}
I have the following packages in my package.json:
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"eslint": "^5.3.0",
"eslint-plugin-react": "^7.10.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^23.5.0",
"babel-jest": "^23.6.0"
"mkdirp": "^0.5.1",
"prettier": "^1.13.7",
"prettier-eslint": "^8.8.2",
"prop-types": "^15.6.0",
"react-test-renderer": "^16.5.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5",
"webpack-merge": "^4.1.4",
"yargs": "^12.0.1"
},
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"css-loader": "^1.0.0",
"eventing-bus": "^1.3.3",
"filesize": "^3.6.1",
"i18next": "^11.5",
"node-sass": "^4.8.3",
"react": "^16.4",
"react-circular-progressbar": "^1.0.0",
"react-dom": "^16.4",
"react-redux": "^5.0",
"react-truncate": "^2.4.0",
"redux": "^4.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.1"
}
Who knows how i can modify my jest.config or .babelrc file so that my tests will compile without problem? Thanks in advance.
Your problem is: js files from /node_modules are not compiled by default.
It is totaly fine when you run your code in browser (that is exactly why such modules are not compiled because you have no need for that).
But jest runs using Node which doesn't understand import syntax. The best solution is to enable babel transpilation of node_modules when you run tests.
{"env": {
"development": {
"plugins": ["transform-es2015-modules-commonjs"]
},
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}}
Also use --no-cache when runing jest while fixing such problems.
I'm using a very up-to-date (December 2017) stack of dependencies. As I try-out isomorphic react tests with Jest, the test suit keeps failing with the following error:
* Test suite failed to run
[BABEL] /__tests__/router.test.js: Plugin/Preset files are not allowed to
export objects, only functions.
Here are my dependencies:
"dependencies": {
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"cors": "^2.8.4",
"express": "^4.16.2",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"#babel/core": "^7.0.0-beta.35",
"babel-cli": "^6.26.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.0.2",
"babel-jest": "^22.0.1",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"enzyme-to-json": "^3.2.2",
"eslint": "^4.11.0",
"eslint-plugin-react": "^7.5.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^21.2.1",
"nodemon": "^1.11.0",
"parallelshell": "^3.0.2",
"react-test-renderer": "^16.2.0",
"regenerator-runtime": "^0.11.1",
"supertest": "^3.0.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"peerDependencies": {
"babel-core": "^7.0.0-0"
}
.babelrc :
{
"presets": [
"env",
"react",
]
}
Does anyone have any insights as to why Jest won't run?
{
"presets": [
"env",
"react"
],
"test": [
"jest"
]
}
Add the last block of code for "test" to you babel.rc
Here is my .babelrc code for reference
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
],
"test": [
"jest"
]
}
Here is my output from the command-line
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 9.264s
Ran all test suites.
Done in 12.99s.
babel bridge is meant to cover any issues between 6 and 7
That is 100% not what the bridge package does. All it does is allow tools that use babel-core to pass through to #babel/core. The entire package is this single line of code.
If you are using #babel/core, you need to use plugins that work on Babel 7. That means babel-preset-react should be changed to #babel/preset-react and same for #babel/preset-env and your .babelrc should be:
{
"presets": [
"#babel/env",
"#babel/react",
]
}
Similarly, babel-polyfill should be #babel/polyfill.
None of this is well documented yet because Babel 7 is still an unstable beta.
I met the same challenge while configuring jest to work with babel-6.
See complete explanation here
But in summary, this combination of --devDependencies worked for me, and i set-up babel-jest to transform my **.js files:
// package.json
"devDependencies": {
"babel-core": "6.26.0",
"babel-jest": "21.2.0",
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1",
"jest": "21.2.1",
"webpack": "3.6.0"
},
"jest": {
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
}
// .babelrc
{
"presets": [
"env",
"stage-0",
"react"
]
}