Good day!
The project uses webpack 5, the tests themselves were written before the transition.
There is clearly a problem with babel, although the config was written according to jest documentation
I tried everything and looked up a lot over the forums and Github, but i couldnt find a solution. everything i try doesnt seem to work. I need help please!
Thank you!
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount, mount, createLocalVue } from '#vue/test-utils';
^
SyntaxError: Unexpected token {
at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1350:14)
package.json
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-regenerator": "^7.12.13",
"#babel/preset-env": "^7.13.12",
"#babel/runtime": "^7.13.10",
"#mdi/js": "^5.9.55",
"#mdi/svg": "^5.9.55",
"#vue/babel-preset-app": "^4.5.12",
"#vue/test-utils": "^1.1.4",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^8.1.1",
"css-loader": "^5.2.0",
"eslint-plugin-jest": "^24.3.6",
"husky": "^6.0.0",
"jest": "^26.6.3",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"vue-inline-svg": "^2.0.0",
"vue-jest": "^3.0.7",
"vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.2",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.10.0",
"izitoast": "^1.4.0",
"regenerator-runtime": "^0.13.7",
"vue": "^2.6.12",
"vue-axios": "^3.2.4",
"vue-click-outside": "^1.1.0",
"vue-select": "^3.11.2",
"vuelidate": "^0.7.6",
"vuetify": "^2.4.8",
"vuex": "^3.6.2"
},
"jest": {
"transform": {
"\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transformIgnorePatterns": [
"/node_modules/"
],
"moduleNameMapper": {
"common/vue/mixins/": "<rootDir>/__mocks__/jsFileMock.js",
"common/vue/components/ns-servers": "<rootDir>/__mocks__/jsFileMock.js"
}
},
.babelrc
{
"presets": [["#babel/env", { "modules": false }]],
"env": {
"test": {
"presets": [["#babel/env", { "targets": { "node": "current" } }]]
}
}
}
this is usually a parsing error, you have to tell Jest how you want to parse your test files and their dependencies. To help you properly I need to see your jest.config file (or your package.json depending on where you decide to set up your jest implementation).
Here are some basic settings to guide you:
// .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"esmodules": true
}
}
],
"vue"
]
}
// package.json
{
"jest": {
"moduleFileExtensions": ["js", "json", "vue"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
}
}
Remember to install first npm install -D babel-preset-vue
Have a nice day!
Related
I am using Webpack with Babel, and #babel/preset-env to hopefully import only required polyfills that I need. It seems though that the entire library is being installed, resulting in a large bundle (~250kb)
My package.js:
{
"name": "holidaynewtheme",
"version": "0.1",
"description": "Starter theme for holidaynewbase",
"private": true,
"main": "webpack.config.js",
"dependencies": {
"core-js": "^3.6.5",
"element-closest": "^3.0.2",
"flickity": "^2.2.1",
"gsap": "^3.4.2",
"js-cookie": "^2.2.1",
"turbolinks": "^5.2.0",
"vanilla-lazyload": "^17.1.0",
"whatwg-fetch": "^3.4.0"
},
"devDependencies": {
"#babel/core": "^7.11.0",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-env": "^7.8.4",
"#babel/runtime": "^7.8.4",
"#shopify/theme-cart": "^3.0.3",
"#shopify/theme-product": "^3.0.3",
"#shopify/theme-product-form": "^3.0.3",
"#shopify/themekit": "^1.1.3",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"bluebird": "^3.5.3",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^7.0.2",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"file-loader": "^3.0.1",
"glob": "^7.1.6",
"html-includes": "^4.3.3",
"mini-css-extract-plugin": "^0.9.0",
"modernizr": "^3.6.0",
"modernizr-loader": "^1.0.1",
"node-sass": "^4.13.1",
"postcss-loader": "^3.0.0",
"pre-commit": "^1.2.2",
"sass-loader": "^8.0.2",
"svg-symbols": "^1.0.5",
"url-loader": "^1.1.2",
"webpack": "^4.41.6",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.11",
"webpack-shell-plugin-next": "^1.1.5"
},
"browserslist": [
"last 1 version",
"> 2%",
"Explorer >= 11"
]
}
My babel.config.json:
{
"presets": [
[
"#babel/preset-env",
{
useBuiltIns: "entry",
debug: true,
corejs: "3.6.4"
}
]
],
"plugins": [
"#babel/plugin-transform-runtime"
]
}
I have the following imports set up in my main entry point:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
I'm using the BundleAnalyzerPlugin and get a gzipped size of 250kb for just core-js:
When I change the browserslist setup to be just Chrome 85, nothing form core-js is imported.
When I remove the import line, nothing is imported either.
OK, feeling foolish.
My webpack.config.js had this configuration for babel-loader:
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/env'],
}
},
... I'm not that au faix with webpack setup, so I think this was overriding my babel.config.json for anything .js.
Also, I removed the import lines, and changed useBuiltIns to be usage and everything works as expected.
The giveaway should have been that my debug: true was not causing debug info to be logged when webpack was compiling. It is now, and my bundle is much smaller.
In the project that I work at the moment, we use browserify. I have done npm i into my console.
Then when I wanted to generate the js with the command
browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js
it throw an error
preset not found #babel/react
Like every developer I went online and did a search for #babel/react but nothing came up. I have seen variations as #babel/preset-react and tried to use them but it didn't solve my problem.
At that point, my package.json locked like:
{
...
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react",
"stage-1"
],
"plugins": [
"transform-object-rest-spread"
]
}
]
]
},
"babel": {
"presets": [
"react",
"es2015",
"stage-1"
]
},
"scripts": {
"build-js": "browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js",
"buildSignUp": "npm run build-js",
...
},
"author": "",
"license": "ISC",
"dependencies": {
"#ungap/url-search-params": "^0.1.2",
"babel-polyfill": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.16.0",
"babelify": "^7.3.0",
"braintree-web": "^3.17.0",
"form-serialize": "^0.7.1",
"jest-junit": "^6.3.0",
"nock": "^10.0.6",
"object-assign": "^4.1.1",
"react": "^15.4.2",
"react-accessible-dropdown": "^1.0.2",
"react-animate-height": "^0.10.8",
"react-dom": "^15.4.2",
"react-dropdown": "^1.2.0",
"react-modal": "^3.8.1",
"react-redux": "^5.0.6",
"react-responsive-modal": "^1.9.4",
"react-scroll": "^1.4.7",
"react-select": "^2.1.2",
"react-slick": "^0.24.0",
"react-swipeable": "^5.4.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"slick-carousel": "^1.8.1",
"validator": "^6.2.1"
},
"devDependencies": {
"babel-core": "6.26.3",
"babel-jest": "^23.6.0",
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
"babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.22.0",
"babel-preset-stage-1": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^13.3.0",
"core-js": "^2.5.3",
"envify": "^4.1.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-15": "^1.2.0",
"jest": "^23.6.0",
"react-test-renderer": "^15.6.2",
"redux-logger": "^3.0.6",
"redux-mock-store": "^1.5.3",
"redux-test-utils": "^0.3.0",
"uglify-js": "^3.3.9",
"uglifyify": "^4.0.5"
},
"-vs-binding": {
"ProjectOpened": [
"build"
]
},
"jest": {
"setupFiles": [
"<rootDir>/test-setup.js"
],
"moduleFileExtensions": [
"js",
"jsx"
],
"testMatch": [
"**/tests/*.js?(x)"
],
"reporters": [
"default",
"jest-junit"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/obj/"
],
"coveragePathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/obj/"
]
}
}
What to install or what to change in order to fix this problem?
The solution in my case was to extend the preset of the package.json
Because the node module extends and evolves from one version to another one there a lot of cases when they are not compatible.
I had deleted my node_module.
Run npm i again.
Added babel-preset-react to my package.json without installing anything, browserify worked properly. My package.json locked like this.
{
"main": "App.jsx",
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react",
"babel-preset-react",
"stage-1"
],
"plugins": [
"transform-object-rest-spread"
]
}
]
]
},
"babel": {
"presets": [
"react",
"es2015",
"babel-preset-react",
"stage-1"
]
},
"scripts": {
...
}
}
This solved my problem. Please let me know if it works for you as well.
App was created using CreateReactApp with ejecting.
I'm trying to use CKeditor according to this doc CKeditor 5
After few hours it works fine, but much more hours trying to fix error in test finished unsuccessfully!
When I run npm test I got this error:
node_modules/#ckeditor/ckeditor5-editor-classic/src/classiceditor.js:10
import Editor from '#ckeditor/ckeditor5-core/src/editor/editor';
SyntaxError: Cannot use import statement outside a module
1 | import React, { useState, useEffect } from 'react';
2 | import CKEditor from '#ckeditor/ckeditor5-react';
> 3 | import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
my package.json:
{
"private": true,
"dependencies": {
"#babel/core": "7.4.3",
"#ckeditor/ckeditor5-alignment": "^16.0.0",
"#ckeditor/ckeditor5-basic-styles": "^16.0.0",
"#ckeditor/ckeditor5-dev-utils": "^12.0.5",
"#ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.5",
"#ckeditor/ckeditor5-editor-classic": "^16.0.0",
"#ckeditor/ckeditor5-essentials": "^16.0.0",
"#ckeditor/ckeditor5-heading": "^16.0.0",
"#ckeditor/ckeditor5-link": "^16.0.0",
"#ckeditor/ckeditor5-list": "^16.0.0",
"#ckeditor/ckeditor5-paragraph": "^16.0.0",
"#ckeditor/ckeditor5-react": "^2.0.0",
"#ckeditor/ckeditor5-theme-lark": "^16.0.0",
"#svgr/webpack": "4.1.0",
"#typescript-eslint/eslint-plugin": "1.6.0",
"#typescript-eslint/parser": "1.6.0",
"axios": "^0.18.1",
"babel-eslint": "10.0.1",
"babel-jest": "24.7.1",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.2",
"babel-preset-react-app": "^8.0.0",
"base64url": "^3.0.1",
"blueimp-load-image": "^2.21.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"cleave.js": "^1.4.10",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"file-loader": "3.0.1",
"fingerprintjs2": "^2.1.0",
"flow-typed": "^2.5.2",
"fs-extra": "7.0.1",
"google-map-react": "^1.1.4",
"history": "^4.9.0",
"html-react-parser": "^0.10.0",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.7.1",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.7.1",
"jest-watch-typeahead": "0.3.0",
"lint-staged": "^8.1.5",
"mini-css-extract-plugin": "0.5.0",
"moment": "^2.24.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.6.0",
"postcss-safe-parser": "4.0.1",
"qs": "^6.7.0",
"raw-loader": "^3.1.0",
"rc-slider": "^8.6.9",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.0",
"react-avatar-editor": "^11.0.7",
"react-dates": "^20.2.2",
"react-dev-utils": "^9.0.0",
"react-dom": "^16.8.6",
"react-modal": "^3.8.1",
"react-onclickoutside": "^6.8.0",
"react-places-autocomplete": "^7.2.1",
"react-redux": "^7.0.3",
"react-responsive": "^6.1.2",
"react-router-dom": "^5.0.0",
"react-select": "^2.4.3",
"react-slick": "^0.24.0",
"react-test-renderer": "^16.8.6",
"react-truncate": "^2.4.0",
"react-with-direction": "^1.3.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"resolve": "1.10.0",
"sass-loader": "7.1.0",
"semver": "6.0.0",
"slick-carousel": "^1.8.1",
"style-loader": "0.23.1",
"stylelint": "^10.0.1",
"stylelint-config-standard": "^18.3.0",
"terser-webpack-plugin": "1.2.3",
"url-loader": "1.1.2",
"webpack": "4.29.6",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.2.0"
},
"husky": {
"hooks": {
"pre-commit": "npm run test && flow"
}
},
"proxy": "https://getrenty-qa.devopsready.tools",
"scripts": {
"start": "node scripts/start.js",
"precommit": "npm test && lint-staged",
"build": "node scripts/build.js",
"test:lint:js": "eslint src/**/*.{js,jsx}",
"test:lint:scss": "stylelint --config=.stylelintrc \"**/*.scss\"",
"test:lint": "npm run test:lint:js && npm run test:lint:scss",
"test:unit": "node scripts/test.js --env=jsdom",
"test": "npm run test:lint && npm run test:unit",
"test:ci": "node scripts/test.js --env=jsdom --ci --reporters=default --reporters=jest-junit --coverage",
"flow": "flow"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.2.0",
"eslint-config-react-app": "^4.0.1",
"eslint-loader": "^2.2.1",
"eslint-plugin-flowtype": "^3.11.1",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-react-hooks": "^1.6.1",
"flow-bin": "^0.98.0",
"jest-junit": "^7.0.0",
"prettier": "^1.17.0",
"redux-devtools": "^3.5.0",
"redux-devtools-extension": "^2.13.8",
"stylelint-scss": "^3.6.1",
"husky": "^2.1.0"
},
"jest": {
"coverageReporters": [
"text",
"cobertura"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [
"src/"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
"presets": [
"react-app"
]
}
}
component code:
import React, { useState, useEffect } from 'react';
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import Heading from '#ckeditor/ckeditor5-heading/src/heading';
import Link from '#ckeditor/ckeditor5-link/src/link';
import List from '#ckeditor/ckeditor5-list/src/list';
import styles from './rtf.module.scss';
const editorConfig = {
plugins: [
Essentials,
Alignment,
Bold,
Italic,
Paragraph,
Heading,
Link,
List,
],
toolbar: [
'heading',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'alignment',
],
};
type Props = {
initialData?: string,
onSave: Function,
title?: string,
savingStatus?: string,
};
const Editor = ({ initialData, onSave, title, savingStatus }: Props) => {
const [editorData, setData] = useState(initialData || '');
useEffect(() => {
setData(initialData);
}, [initialData]);
const handleChange = (event, editor) => {
const data = editor.getData();
setData(data);
};
const resetEdit = () => {
setData(initialData);
};
const handleSave = () => {
onSave(editorData);
};
return (
<div>
<div className={styles.title_row}>
<h5 className={styles.title}>{title}</h5>
<button
type="button"
className={`button_small ${styles.to_right}`}
onClick={resetEdit}
>
Reset
</button>
<button
type="button"
className="button_green_dark_short"
onClick={handleSave}
>
Save
</button>
</div>
<div className={styles.saving_status}>{savingStatus}</div>
<div className={styles.rtf_wrapper}>
<CKEditor
config={editorConfig}
editor={ClassicEditor}
onChange={handleChange}
data={editorData}
/>
</div>
</div>
);
};
Editor.defaultProps = {
initialData: '',
title: '',
savingStatus: '',
};
export default Editor;
I have tried modify jest.transformIgnorePatterns in package.json but it failed again.
Any advices?????
This is happening because you are using the unbundled version of the ckeditor, jest does not understand es6, so you got to change transformIgnorePatterns so jest can be able to compile the files for you.
This is for a standard jest configuration (e.g jest.config.js) and .babelrc
*If you are using .babelrc try changing it to babel.config.js
In your jest configuration file include this:
{
moduleNameMapper: {
'^~/(.*)': '<rootDir>/src/$1',
'\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
},
transformIgnorePatterns: ['/node_modules/(?!#ckeditor)/.+\\.js$']
}
If you are using craco in a react app use it like this:
jest: {
configure(config) {
config.moduleNameMapper = {
'^~/(.*)': '<rootDir>/src/$1',
'\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
};
...
config.transformIgnorePatterns = ['/node_modules/(?!#ckeditor)/.+\\.js$'];
return config;
},
},
The ckeditor builded version is buggy right now, I hope they fix it soon enough...
I'm Using Webpack4 and #babel/core 7 for my ReactJs Project.When i trying to build project i'm getting bellow error on terminal
ERROR in ./src/views/Pages/Login/Login.js Module build failed (from
./node_modules/babel-loader/lib/index.js): SyntaxError:
/xx/xx/web/src/views/Pages/Login/Login.js: Unexpected token (8:6)
render() { return (
<div className="app flex-row align-items-center">
^
Package.json
"dependencies": {
"#babel/core": "^7.4.0",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.4.2",
"#babel/preset-react": "^7.0.0",
"#coreui/coreui": "2.1.12",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "1.3.1",
"#coreui/icons": "0.3.0",
"#coreui/react": "2.5.1",
"#devexpress/dx-react-core": "2.0.2",
"#devexpress/dx-react-grid": "2.0.2",
"#devexpress/dx-react-grid-bootstrap4": "2.0.2",
"axios": "0.19.0",
"bootstrap": "4.3.1",
"babel-loader": "8.0.5",
"copy-webpack-plugin": "5.0.4",
"css-loader": "2.1.1",
"dotenv-webpack": "1.7.0",
"file-loader": "4.1.0",
"chart.js": "2.8.0",
"core-js": "3.1.4",
"html-webpack-plugin": "3.2.0",
"image-webpack-loader": "5.0.0",
"node-sass": "4.12.0",
"node-sass-chokidar": "1.3.4",
"npm-run-all": "4.1.5",
"mini-css-extract-plugin": "0.8.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"prop-types": "15.7.2",
"react": "16.8.6",
"react-chartjs-2": "2.7.6",
"react-redux": "7.1.0",
"react-router-dom": "5.0.1",
"reactstrap": "8.0.0",
"redux": "4.0.4",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.4.1",
"webpack": "4.29.6",
"webpack-cli": "3.3.0"
}
Webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx|es6)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ["#babel/preset-env"]
}
}
],
},
......
]
}
.babelrc
{
"presets": [ "#babel/preset-env","#babel/preset-react"],
"plugins": ["#babel/plugin-proposal-class-properties","#babel/transform-runtime"]
}
You need to add preset react to your .babelrc file like this
{
"presets": ["es2015", "react"],
"plugins": [
"transform-es2015-destructuring",
"transform-object-rest-spread",
["transform-class-properties", { "spec": true }]
]
}
If that is not the case you can check their document here
I'm trying to run my tests in repo here: https://github.com/Futuratum/moon.holdings
But I'm getting the following error
/Users/leongaban/projects/Futuratum/moon.holdings/jest.config.js:1
(function (exports, require, module, __filename, __dirname) { import { configure } from 'enzyme'
My tests use to work and I haven't changed anything, so curious as to what could be causing this problem?
My jest.config.js file looks correct:
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })
package.json
{
"name": "moon.holdings",
"version": "2.0.0",
"description": "Moon Holdings: track your cryptocurrency portfolio.",
"main": "index.js",
"scripts": {
"dev": "next -p 7777",
"build": "next build",
"start": "next -p 7777",
"test": "NODE_ENV=test jest --watch --no-cache",
"test-win": "SET NODE_ENV=test&& jest --watch"
},
"author": "Futuratum",
"license": "UNLICENSED",
"dependencies": {
"#zeit/next-sass": "^1.0.1",
"#zeit/next-typescript": "^1.1.1",
"axios": "^0.18.0",
"decko": "^1.2.0",
"next": "^8.0.4-canary.10",
"next-routes": "^1.4.2",
"node-sass": "^4.11.0",
"ramda": "^0.26.1",
"ramda-adjunct": "^2.17.0",
"react": "^16.7.0",
"react-adopt": "^0.6.0",
"react-dom": "^16.7.0",
"react-ga": "^2.5.7",
"react-redux": "^6.0.0",
"react-transition-group": "^2.5.0",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"styled-components": "4.0.3",
"tslint": "^5.12.1",
"tslint-react": "^3.6.0",
"typescript": "^3.2.4",
"waait": "^1.0.2"
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.3.0",
"#babel/preset-typescript": "^7.1.0",
"#types/enzyme": "^3.1.15",
"#types/jest": "^23.3.13",
"#types/next": "^7.0.6",
"#types/ramda": "^0.25.49",
"#types/react": "^16.7.20",
"#types/react-dom": "^16.0.11",
"#types/react-redux": "^7.0.1",
"#types/styled-components": "4.0.3",
"#types/zeit__next-typescript": "^0.1.1",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.1.0",
"babel-plugin-sass-vars": "^0.2.1",
"babel-plugin-styled-components": "^1.10.0",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"enzyme-to-json": "^3.3.4",
"jest": "^24.1.0"
},
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
"testPathIgnorePatterns": [
"<rootDir>/.next/",
"<rootDir>/node_modules/"
],
"transform": {
".*": "babel-jest",
"^.+\\.js?$": "babel-jest",
"^.+\\.ts?$": "babel-jest",
"^.+\\.tsx?$": "babel-jest"
},
"moduleFileExtensions": [
"js",
"json",
"ts",
"tsx"
],
"modulePaths": [
"<rootDir>/components/",
"<rootDir>/pages/",
"<rootDir>/shared/"
]
}
}
Looks like you accidentally renamed jest.setup.js to jest.config.js in this commit.
Change it back to jest.setup.js and it should work.
Details
jest.config.js is a special file that is used to set Jest configuration options.
enzyme configuration is typically done in a setupTestFrameworkScriptFile file for older versions of Jest or setupFilesAfterEnv for newer versions of Jest.
Your package.json has setupTestFrameworkScriptFile set to jest.setup.js.
Based on that info I suspected that maybe jest.setup.js got accidentally renamed, and was able to find the commit where it happened in the repo history.