I try to test my app created via create-react-app. There is only one test file generated automatically:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
This is my package.json (also i have package-lock.json (~ 15k rows)):
{
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"avro-js": "^1.9.1",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-redux": "^7.1.1",
"react-scripts": "3.2.0",
"react-syntax-highlighter": "^11.0.2",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
When i try to test it using test script i get this 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".
Details:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export
{ default as a11yDark } from './a11y-dark';
Also, i don't have .babelrc file. I tried to add .babelrc but it didn't help (or maybe i did it incorrectly)
If you are getting this error when trying to import the javascript styles for the component, make sure you are targetting the
react-syntax-highlighter/dist/cjs/...
instead of the
react-syntax-highlighter/dist/esm/...
Jest should be able to parse that.
So, finally i've solved this.
My final configs are:
babel.config.js:
module.exports = {
presets: ['#babel/preset-env', '#babel/preset-react'],
};
package.json:
{
"name": "project",
"version": "1.0",
"private": true,
"dependencies": {
"avro-js": "^1.9.1",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-redux": "^7.1.1",
"react-scripts": "3.2.0",
"react-syntax-highlighter": "^11.0.2",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"jest": {
"transformIgnorePatterns": [
"/node_modules/(?!(react-syntax-highlighter)/)"
]
},
"devDependencies": {
"#babel/cli": "^7.0.0",
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"eslint": "^6.7.1",
"jest": "^24.9.0",
"jest-cli": "^24.9.0",
"react-test-renderer": "^16.12.0",
"redux-mock-store": "^1.5.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
I'm not sure that this is the best solution, but at least it works
Related
I have created fresh ReactJS project using create-react-app,
used node Version : 12.22.12,
To make compactable for older version browser I have used polyfill core-js,
after using polyfill now it working in chrome 31 version onwards. It is not working in chrome 27 to 30. Getting error:- Uncaught SyntaxError: Unexpected token )
package.json file
{
"name": "xyz",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"core-js": "^3.25.0",
"grommet": "^2.25.0",
"grommet-controls": "^3.0.2",
"grommet-icons": "^4.7.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"regenerator-runtime": "^0.13.9",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"compression-webpack-plugin": "^10.0.0",
"mini-css-extract-plugin": "^2.6.1",
"webpack-bundle-analyzer": "^4.5.0"
}
}
Another method which I have tried
I have created ReactJS project using Webpack,
used node Version : 12.22.12,
This is not working in older version of chrome,
Getting Error:- Uncaught SyntaxError: Unexpected token )
package.json file
{
"name": "xyz",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.18.10",
"#babel/preset-env": "^7.18.10",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
},
"dependencies": {
"#babel/polyfill": "^7.12.1",
"core-js": "^3.25.1",
"grommet": "^2.25.1",
"grommet-controls": "^3.0.2",
"grommet-icons": "^4.7.0",
"node-polyfill-webpack-plugin": "^2.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"regenerator-runtime": "^0.13.9",
"styled-components": "^5.3.5"
}
}
It's rather related to create-react-app
Please follow this guide
The first thing you can do is change browserlist, because now you only support the newest browsers with your configuration
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
But I doubt you can run React on a browser from 2013.
It's a duplicate question on SVG, but maybe my scenario is different, I am not able to understand any solution on the web for my problem which is, getting below error
ERROR in ./src/Utility/assets/customer-delight-logo.svg
Module build failed (from ./node_modules/#svgr/webpack/lib/index.js):
TypeError: Cannot read properties of null (reading 'tagName')
at parse (C:\Customer delight\customerdelight\node_modules\svg-parser\dist\svg-parser.umd.js:279:15)......
my package.json contains
{
"name": "customerdelight",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"bootstrap": "^4.6.1",
"html-webpack-plugin": "^5.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "webpack serve"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.18.9",
"#babel/preset-env": "^7.18.9",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"cors": "^2.8.5",
"express": "^4.18.1",
"file-loader": "^6.2.0",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
}
}
this is my code
import Logo from '../../Utility/assets/customer-delight-logo.svg';
export default function Logocomp(){
return(
<div className="rad-logo-container">
<img src={Logo} alt="" height="50" width="140"/>
</div>
)
}
Thanks in advance!
Try to update your webpack configuration to handle loading svg files. inside the module.rules array you should add the following:
{
test: /\.(png|svg)$/,
use: ['file-loader']
}
I've developed UI using create-react-app. UI is working fine with the normal npm start command, but when I build the UI with npm run build it's throwing the error `Conversion from 'BigInt' to 'number' is not allowed
I didn't get many related solutions to my problem on google. Can someone help please ?
My Package.json
{
"name": "erp-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.15",
"#popperjs/core": "^2.10.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.22.0",
"bootstrap": "^5.0.1",
"font-awesome": "^4.7.0",
"jsontokens": "^3.1.1",
"react": "^17.0.2",
"react-datepicker": "^4.8.0",
"react-dom": "^17.0.2",
"react-hook-form": "^7.17.0",
"react-paginate": "^7.1.3",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-scripts": "^4.0.3",
"react-toastify": "^8.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Error screenshot which is point in browser
I am working with react project.
I want my vscode to autoformat when I save the code but want to do by adding some package inside package.json(I am not sure whether it is possible or not) & not with vscode because people have their own configuration in vscode so to be identical with those config i want to do it with some prettier. Here is my prettier config file
.prettierrc.json
{
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 120
}
package.json
{
"name": "XXXXXXXXXXXX",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^4.20.0",
"browser-image-compression": "^2.0.0",
"dotenv": "^16.0.0",
"eslint": "^8.13.0",
"eslint-config-prettier": "^8.5.0",
"formik": "^2.2.9",
"isomorphic-fetch": "^3.0.0",
"material-ui-icons": "^1.0.0-beta.36",
"moment": "^2.29.3",
"prettier-eslint": "^13.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-dropzone": "^12.0.5",
"react-js-pagination": "^3.0.3",
"react-modal": "^3.14.4",
"react-moment": "^1.1.2",
"react-multiselect-checkboxes": "^0.1.1",
"react-number-format": "^4.9.3",
"redux": "^4.2.0",
"redux-form": "^8.3.8",
"redux-observable": "^2.0.0",
"redux-promise-middleware": "^6.1.2",
"redux-thunk": "^2.4.1",
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "npx prettier --write .",
"prepare": "husky install"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"husky": "^8.0.0",
"prettier": "2.6.2",
"pretty-quick": "^3.1.3"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
}
You can use Prettier with a pre-commit tool. This can re-format your files that are marked as “staged” via git add before you commit.
Make sure Prettier is installed and is in your devDependencies before you proceed.
npx mrm#2 lint-staged
use this link for further info
Pre-commit Hook
I have following function in actions.js file
export const mockFunction = () => {
return true
}
I have an index.js file, where I want to export this function to the rest of the app
import * as actions from './actions'
export {actions}
I get as error:
Failed to compile
./src/providers/xxform_provider/actions.jsx
Error: ENOENT: no such file or directory, open '/Users/client/xxxx/src/providers/xxform_provider/actions.jsx'
I am not using webpack, actually I guess no, if I have a look at my package.json
I am using create-react-app
https://github.com/facebook/create-react-app
Does anybody know what create-react-app uses as a js bundler? I can not tell from the package.json file
{
"name": "react_porter",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#fortawesome/react-fontawesome": "^0.1.8",
"#material-ui/core": "^4.9.0",
"#material-ui/lab": "^4.0.0-alpha.40",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"moment": "^2.24.0",
"react": "^16.12.0",
"react-datetime": "^2.16.3",
"react-dom": "^16.12.0",
"react-facebook-login": "^4.1.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"react-swipe": "^6.0.4",
"react-swipeable-views": "^0.13.5",
"styled-components": "^5.0.0",
"swipe-js-iso": "^2.1.5",
"swipejs": "^2.2.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
actions.js
const mockFunction = () => true;
export default mockFunction;
index.js
import mockFunction from './actions';
i hope this helps