Husky Hook does not work properly with Test - husky

I'm configuring Husky to block commits if the prettier or eslint accuses both an error or warn, and block the push if it doesn't pass the tests.
However, when running the test, the test CLI is displayed (it is in the image below), with this, no key works, but I can only finish by clicking with the shortcut ctrl+z, which suspends my push.
MY CODE IN .HUSKY FOLDER:
pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn prettier-check
yarn lint-check
pre-push
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn test
MY PACKAGE.JSON:
{
"name": "web-whatsapp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prettier-check": "prettier --check 'src/**/*.{ts,tsx}'",
"prettier-fix": "prettier --write 'src/**/*.{ts,tsx}'",
"lint-check": "eslint 'src/**/*.{ts,tsx}'",
"lint-fix": "eslint --fix 'src/**/*.{ts,tsx}'",
"prepare": "husky install"
},
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"styled-components": "^5.2.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"eslint": "^7.24.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.3.5",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^4.0.1",
"husky": "^6.0.0",
"lint-staged": "^10.5.4",
"prettier": "^2.2.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Well, what I had to do was this ..
Install the cross-env library in development mode. This library causes the terminal to clear the buffer at the end of the test run in order to continue with the pre-push Hook.
I inserted the following in the "test" scripts:
"test": "cross-env CI = true react-scripts test --passWithNoTests"
About CI = true
This environment variable, short for Continuous Integration, is commonly defined in various CI environments, such as Travis CI and Github Actions, among many others.
NOTE
Do not use the --watchAll flag, as it will "lock" the terminal.

Related

Uncaught ReferenceError: process is not defined erorr showing after saving a change?

I am getting this annoying error after making a slightest change to my code and ctrl and save...
Then this error shows the app, freezes and I have to reload the page again... any idea?
I never got this error before...
It appeared out of no where, below is the error and my package file.
My app doesn't have any backend to it, so I wonder what is causing the error.
Error in the console of the web browser :
VM188:2 Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at HTMLIFrameElement.e.onload (index.js:1:1)
package.json :
{
"name": "app",
"version": "0.1.0",
"private": true,
"engines": {
"node": "14.17.4",
"npm": "6.14.14"
},
"dependencies": {
"#emotion/react": "^11.7.0",
"#emotion/styled": "^11.6.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#mui/material": "^5.2.1",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/html2canvas": "^1.0.0",
"#types/jest": "^27.0.2",
"#types/jspdf": "^2.0.0",
"#types/node": "^16.11.6",
"#types/react": "^17.0.33",
"#types/react-dom": "^17.0.10",
"#types/react-router-dom": "^5.3.2",
"#types/uuid": "^8.3.3",
"html2canvas": "^1.3.3",
"jspdf": "^2.4.0",
"notistack": "^1.0.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"typescript": "^4.4.4",
"uuid": "^8.3.2",
"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"
]
}
}
After long discussion with #Richardson in question comments, here I am posting my working solution. I can't find root cause of error but possible issue is...
When I update react-scripts library to v5.0.0 then application stop working so again I downgrade react-scripts to v4.0.3 and then facing process is not defined error. After downgrade react-scripts when I have installed node_modules it has updated some dependency in package-lock.json file and it causes an issue.
Only solution I found is as suggested by #Richardson I just add old package-lock file and reinstall node_modules (you can also try by delete existing node_modules put old package-lock file and install modules again) and it works!!!

npm install error in Bitbucket CI/CD pipeline

I have a pipeline set up for my Bitbucket repository that runs npm install if there is no node cache. Up until now it has worked fine, but the node cache was recently cleared, and now I'm getting the following output from Bitbucket (Pastebin link, due to character limit): https://pastebin.com/fY9TznNn
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/geojson": "^7946.0.7",
"#types/google-libphonenumber": "^7.4.19",
"#types/google-map-react": "^2.1.0",
"#types/jest": "^24.0.0",
"#types/node": "^12.12.55",
"#types/react": "^16.9.49",
"#types/react-bootstrap": "^0.32.22",
"#types/react-dom": "^16.9.8",
"#types/react-modal": "^3.10.6",
"#types/react-router-dom": "^5.1.5",
"#types/supercluster": "^5.0.2",
"axios": "^0.21.1",
"bootstrap": "^4.5.2",
"enzyme": "^3.11.0",
"eslint": "^6.8.0",
"firebase": "^7.24.0",
"geojson": "^0.5.0",
"google-libphonenumber": "^3.2.14",
"google-map-react": "^2.1.3",
"node-sass": "^4.0.0",
"react": "^16.13.1",
"react-async": "^10.0.1",
"react-bootstrap": "^1.3.0",
"react-cool-img": "^1.2.4",
"react-dom": "^16.13.1",
"react-dropzone": "^11.3.2",
"react-modal": "^3.12.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4",
"supercluster": "^7.1.0",
"typescript": "^3.2.1",
"use-supercluster": "^0.2.9"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "npx prettier --write src && npx eslint src --fix --ext .ts --ext .tsx"
},
"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": {
"#types/enzyme": "^3.10.8",
"#types/enzyme-adapter-react-16": "^1.0.6",
"#typescript-eslint/eslint-plugin": "^3.10.1",
"#typescript-eslint/parser": "^3.10.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"eslint": "^7.23.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0",
"eslint-plugin-sort-keys-fix": "^1.1.1",
"prettier": "^2.1.1"
}
}
bitbucket-pipelines.yml:
image: node
definitions:
steps:
- step: &lint
name: Check code style
script:
- npm install # this is where the error occurs
- npx eslint **/*.ts[x]
caches:
- node
- step: &build
name: Build and test
script:
- echo > ".env"
- echo REACT_APP_GOOGLE_API_KEY=$GOOGLE_API_KEY >> ".env"
- echo REACT_APP_HANDSHAKE_API_KEY=$HANDSHAKE_API_KEY >> ".env"
- npm install
- npm run test
- npm run build
artifacts:
- build/**
caches:
- node
- step: &deploy
name: Deploy to Firebase
script:
- cd functions
- npm install
- cd ..
- pipe: atlassian/firebase-deploy:1.0.0
variables:
FIREBASE_TOKEN: $FIREBASE_TOKEN
PROJECT_ID: $FIREBASE_PROJECT
pipelines:
pull-requests:
"**":
- step: *lint
- step: *build
branches:
master:
- step: *lint
- step: *build
- step: *deploy
I'm concerned it might have something to do with the node-sass package as I've experienced issues with it before, and it's the first dependency to appear in the error. But I'm really not sure how to interpret this output or how to fix it. Thanks for any help!
Looks like my intuition was right—it was because of the node-sass package. Apparently it's deprecated. Installing sass instead fixed the problem!

How to start React App on Development machine as in specific environment?

We are using Microsoft Windows for both development and hosting.
npm version - 6.8.0
node version - 10.15.3
I would like to know how I can start my ReactApp locally on my development machine as in Production environment.
We have multiple environments at work such as Test, Staging, PreProd, Prod.... etc and we want to test the behaviour of the app without actual deployment to the target env.
We've got some logic statements in the source codes by using process.env.NODE_ENV to check the different environments.
I tried to update package.json scripts section as the following. But, it doesn't work.
"scripts": {
"start": "react-scripts start",
"start-prod": "cross-env NODE_ENV=production react-scripts start",
"start-prod2": "set NODE_ENV=production&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I tried both start-prod and start-prod2 . Even though it hosts the app successfully, it's always in development mode. Please see the following screenshots:
npm run start-prod
npm run start-prod2
If I use npm run build, it generates the build with production env. But it takes too much time to test.
Could you please guide me how I could simulate the various environment in my development machine?
P.S. I'm just using the default create-react-app script set up and I don't have any custom webpack config file.
Complete package.json file
{
"name": "react-workout-diary",
"version": "0.10.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.18",
"#fortawesome/free-brands-svg-icons": "^5.8.2",
"#fortawesome/free-regular-svg-icons": "^5.8.2",
"#fortawesome/free-solid-svg-icons": "^5.8.2",
"#fortawesome/react-fontawesome": "^0.1.4",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"es6-object-assign": "^1.1.0",
"es6-promise": "^4.2.6",
"formik": "^1.5.7",
"has-value": "^2.0.2",
"is-empty": "^1.2.0",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-datepicker": "^2.6.0",
"react-delay": "^0.1.0",
"react-dom": "^16.8.6",
"react-moment": "^0.9.2",
"react-redux": "^7.0.3",
"react-router-dom": "^5.0.0",
"react-scripts": "^3.0.1",
"react-toastify": "^5.2.1",
"reactstrap": "^8.0.0",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.2",
"redux-saga-routines": "^3.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"uuid": "^3.3.2",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-scripts start",
"start-prod": "cross-env NODE_ENV=production react-scripts start",
"start-prod2": "set NODE_ENV=production&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"cross-env": "^5.2.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.2",
"enzyme-to-json": "^3.3.5",
"react-test-renderer": "^16.8.6",
"redux-saga-test-plan": "^4.0.0-beta.3"
}
}
You can't change the NODE_ENV variable:
You cannot override NODE_ENV manually. This prevents developers from
accidentally deploying a slow development build to production.
What you can do is to use different .env files:
From: React documentation
Files on the left have more priority than files on the right:
npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env (note .env.local is missing)

Getting issues while installing React Project on Windows system

I am trying to install a React Web Application on my Windows system. It was working fine earlier but when I re-installed my Windows then it stopped working. I have already installed Node and Npm.
When I run the command npm install it goes well. But when I run the command npm start it throws the following error:
REACT_APP_ENV is not recognized as an internal or external command
Please see the attached image also:
I have tried a lot to find and fix the issue but nothing worked.
Here is package.json file content:
{
"name": "wm-webapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"gapi-client": "0.0.3",
"libphonenumber-js": "^1.7.7",
"moment": "^2.24.0",
"node-sass": "^4.11.0",
"react": "^16.7.0",
"react-bootstrap": "^0.32.4",
"react-dates": "^18.4.1",
"react-dom": "^16.7.0",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.0.0",
"react-places-autocomplete": "^7.2.0",
"react-redux": "^5.0.7",
"react-responsive": "^6.1.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "2.1.3",
"react-select": "^1.2.1",
"react-stripe-elements": "^2.0.2",
"react-table": "^6.8.6",
"react-toastify": "^4.5.2",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.7",
"redux-form": "^8.1.0",
"redux-form-input-masks": "^1.3.0",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.0",
"redux-thunk": "^2.3.0",
"store": "^2.0.12",
"styled-components": "^4.1.3"
},
"scripts": {
"start:env": "env-cmd .env.${REACT_APP_ENV} react-scripts start",
"start": "REACT_APP_ENV=dev npm run start:env",
"start:test": "REACT_APP_ENV=test npm run start:env",
"build:env": "env-cmd .env.${REACT_APP_ENV} react-scripts build",
"build": "REACT_APP_ENV=test npm run build:env",
"build:prod": "REACT_APP_ENV=prod npm run build:env",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "aws s3 cp build s3://test.washmix.com/ --recursive --profile washmix",
"format": "prettier --write --single-quote --tab-width=2 --print-width=80"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"axios-mock-adapter": "^1.16.0",
"env-cmd": "^8.0.2",
"husky": "^1.3.1",
"prettier": "^1.16.1"
}
}
Already late to answer but for people searching for the answer..
For Windows (cmd.exe) :
'set "REACT_APP_ENV=dev" && npm run start'
For Windows (Powershell) :
'($env:REACT_APP_ENV = "dev") -and (npm start)'
For Linux, macOS (Bash) :
'REACT_APP_ENV=dev npm start'
You can anytime get thing variable with process.env.REACT_APP_ENV
You must change all environment variables in your package.json for:
Set NAME_VARIABLE=VALUE
Ex:
"start": "Set REACT_APP_ENV=dev&& npm run start:env",
If you're running on windows, remember to leave no space between the commands and &&.
So the start script will be :
"start-staging":"set REACT_APP_ENV=staging&&react-scripts start"
In script-> start, write cross-env in starting of the value.
After that
Run: npm install.
And you are ready to go

Eslint reporting in VSCode but not on the terminal

I'm using es-lint VScode extension and it is catching 5 linting errors, however when I run npm run lint from package.json It only lists 2 errors. I'm wondering why the terminal is not outputting all linting errors, so I can fix it with esw --fix on save.
Note: I'm using both prettier and airbnb config rules.
Here is my .eslintrc:
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"globals": { "document": false }
}
Here is pacjakge.json:
{
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-scripts": "1.0.17",
"redux": "^3.7.2",
"styled-components": "^2.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint --fix ./src",
"watch:lint": "node_modules/eslint-watch/bin/esw -w --fix"
},
"devDependencies": {
"eslint": "^4.12.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.5.1",
"eslint-watch": "^3.1.3",
"prettier": "^1.9.1"
}
You are using the --fix option when running npm run lint, that means ESLint will only display errors/warnings it can't fix automatically.. everything else, it will just fix and not complain about.
If you want it to list all the errors/warning, you can remove --fix from your NPM script, and it will list all erros/warnings it finds (it will run eslint ./src). Later if you want to fix the errors as well, run npm run lint -- --fix, that will pass everything after -- directly to the script, i.e., will run eslint ./src --fix which will work correctly.

Resources