npm test -- --coverage never exits - node.js

I am using create-react-app to create a react application. When I executes npm test -- --coverage the test never exists. npm test actually runs react-scripts test. Any Idea?

-- --coverage part won't work, and should use one of the commands below to set CI to true.
By default npm test runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called CI.
source: React docs
Windows (cmd.exe)
set CI=true && npm test
set CI=true && npm run build
Windows (Powershell)
($env:CI = "true") -and (npm test)
($env:CI = "true") -and (npm run build)
Linux, macOS (Bash)
CI=true npm test
CI=true npm run build
NOT included in the docs
For Docker (node and react):
docker run -e CI=true [myImage] npm run test

Coverage won't work with Jest in watch mode.
Because "react-scripts test --env=jsdom" works in watch mode by default, the watch mode has to be switched off while generating the coverage output.
The following excerpt from the package.json contains a line "coverage" for illustration, how code coverage can be achieved within an app which was bootet by create-react-app.
It's just the modified "test" script, where the options --watchAll=false and --coverage are added in combination:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"coverage": "react-scripts test --env=jsdom --watchAll=false --coverage",
"eject": "react-scripts eject"
}
Please note that it is obsolete to use standalone double-dash -- .

Most of the time this issue can be occur because of following reasons.
Not mentioning the required npm-script arguments in the
package.json file. If you use create-react-app to create your
react application, then it will not accept any command line
arguments. To resolve this problem, add following line under the
script tag in your package.json.
"test": "react-scripts test --coverage --watchAll", //mark --watchAll=false if you want.
Not mentioning the required jest configuration arguments in
the package.json or jest.config.js files. You should mention the files
which needed to include in your test coverage under the jest
configurations. Add following configurations in your
package.json.
package.json
"jest": {
"collectCoverageFrom": [
"src/**/*.js",
"!src/index.js", // files you need to avoid in test coverage
"!src/hooks/*.js",
"!src/context/*.js"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"coverageReporters": [
"html",
"text"
]
},

Specifying a directory worked in my case
"test:cover": "react-scripts test --coverage src"

I tried all the solutions above, and for me it was still hanging with the message: Ran all test suites..
But this little hack helped:
"test:ci": "cross-env CI=true react-scripts test --forceExit --detectOpenHandles",
Explanation: The problem was coming from Jest not being able to close all processes. The above is a quick workaround. Ideally you should track the process that's stopping Jest from exiting.

In my case just added a new script "test:coverage": "react-scripts test --coverage"
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:coverage": "react-scripts test --coverage",
"eject": "react-scripts eject"
},

Related

Create symlink in build directory -- NodeJS on build

I have a basic react structure:
-project-root
--- node_modules
--- public
--- src
they live in /var/www/html/project-root
I have a php API at var/www/html/php-api
Our php API we use for other applications that I want to include into the build for "onsite" API usage. So my thought was to have a symlink created so that the api directory is available in the build directory when I do sudo npm run build to production. Thus enabling me to make this call axios.get('/api/v2/users') and the api directory would symlink to /var/www/html/php-api.
I have followed the docs on Node.js fs.symlink() Function, but this looks like it creates a symlink in the node filesystem only:
fs.symlink(__dirname + "\\api",
"symlinkToDir", '/var/www/html/php-api', (err) => {
if (err)
console.log(err);
else {
console.log("Symlink created");
console.log("Symlink is a directory:",
fs.statSync("symlinkToDir").isDirectory()
);
}
});
I even thought of trying to hackishly throw a shell command on the tail of the build IE:
"scripts": {
"start": "node server/index.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject && ln -s /var/www/html/php-api/ /var/www/html/project-root/build/api"
},
Am I going about this the wrong way? The only other hackish idea I can come up with is a Linux cron job that keeps that link in the build directory .. I can't bring myself to do this .. Can someone help me do this correctly?
The easiest answer I could find was to add it into the "build" portion of "scripts" in package.json
"scripts": {
"start": "node server/index.js",
"build": "react-scripts build && ln -s /var/www/html/php-api /var/www/html/project-root/build/api",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

How to set env variables to react scripts

I'm building a project that has a backend, and a frontend.
I had the idea that'd be cool to have both folders in the same directory with another npm script that runs them.
The problem is that I'm unable to set the port in one of the two packages, that being the frontend.
In my main package.json I have this:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start-app": "cross-env SERVER_PORT=8080 npm start --prefix ./frontend",
"start-server": "cross-env SERVER_PORT=8080 npm start --prefix ./backend"
},
And it works for the backend, but doesn't for the frontend.
The frontend has the base configuration.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
The project runs, but when I look for the process.env, there's no trace of the SERVER_PORT in the FrontEnd but it exists in the BackEnd.
(Backend scripts are the default for a new npm package).
"scripts": {
"start": "node main.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
CRA uses PORT to define the port variable. Run it like:
"start": “PORT=8000 react-scripts start"
Additionally since CRA is essentially a static site it doesn't have in itself a concept of env variables - these are NodeJS specific. A few such as PORT and NDOE_ENV are defined for you and used in the dev server. If you wanted to use custom env vars within your React components you can make them available by defining the with the prefix: REACT_APP_ such as REACT_APP_SITENAME for example.
Check out the docs here: https://create-react-app.dev/docs/adding-custom-environment-variables/

React command on yarn start and also init server with same command

I'm trying to attach another command to yarn start. I'm not sure if it is possible but when I run command yarn start I want my react app to start and I also want to fire up my server at the same time.
What I do know is use 2 terminals one with react app directory and call on yarn start
C:\Users\ivanr\Documents\GitHub\bees\business-scheduler>
and one with server directory (which is inside react app directory) and call on node src/index.js
C:\Users\ivanr\Documents\GitHub\bees\business-scheduler\server>
"scripts": {
"start": "react-scripts start", // is it possible that I can say in server directory run node src/index.js here?
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
You can use concurrently
First install it
$ npm install concurrently
Then use it in your command
"scripts": {
"start": "concurrently \"yarn start-client\" \"yarn start-server\"",
"start-client": "react-scripts start",
"start-server": "cd .\server && node src/index.js"
}
You can use npm-run-all
"scripts": {
"clean": "rimraf dist",
"lint": "eslint src",
"build": "babel src -o lib"
}
npm-run-all clean lint build

npm stuck on input loop after updating from react-scripts-ts to react-scripts

Not really any code for this, essentially used this blog as reference: https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/
basically, the scripts look like this
"scripts": {
"watch": "npm-watch",
"build-css": "lessc src/main.less src/index.css",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"test:staged": "echo 'write some tests'",
"eject": "react-scripts eject"
}
it runs fine up until "npm start" where everything is fine up until this moment:
[nodemon] clean exit - waiting for changes before restart
? We're unable to detect target browsers.
Would you like to add the defaults to your package.json? (Y/n) n
Unrecognized input: n
Unrecognized input:
where it's this weird loop because input isn't parsing input properly or something, as in I can't even exit because it's detected as an input, so the only way to stop is to shut down the terminal
In the package.json
"browserslist": [
"defaults"
]

How to disable source maps for React JS Application

My react folder structure is as below
I've not used the create-react-app version. I tried using GENERATE_SOURCEMAP=false. But It didn't work.
Where can I find the .map files. How can I delete those files?
I cannot find a build folder.
I've tried using the below script But It cannot work in removing source maps
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false && npm run build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
just remove &&
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
You have to create a .env file in your root directory (same folder as package.json) and set GENERATE_SOURCEMAP=false on a single line.
for additional configurations, you may refer to the documentation here:
https://facebook.github.io/create-react-app/docs/advanced-configuration
What I have tested and which is working is to add this code in your .env.production file or .env file
GENERATE_SOURCEMAP=false
Solution 1
Edit your package.json like below:
Windows:
"scripts": {
"start": "react-scripts start",
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Linux:
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Solution 2 (Recommended)
This solution is not operating system dependent and works on both Linux and Windows. Just create a file called .env in the root path of your project and add the following line to it:
GENERATE_SOURCEMAP=false
For windows cmd and create-react-app + react-scripts,
You should use set and close with \" YOUR_TMP_ENV_VAR \"
See example:
"deploy:prod:hosting": "set \"GENERATE_SOURCEMAP=false\" && npm run build
this answer helped me:
How to set environment variable in React JS..?
This works for me. Hope it helps anyone.
// package.json
"build": "react-scripts build",
"postbuild": "rimraf build/**/*.map"
This way, it will auto delete map files during build generation.
Solution for ejected create-react-app v2.1.3.
Go to /config/webpack.config.js directory and change the following line:
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
To:
const shouldUseSourceMap = false;
And Bob is your uncle.
just add GENERATE_SOURCEMAP=false in .env
Put this one in your package.json
"build": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
It works on Windows and Linux...
After long struggle nothing worked. Finally what worked for me is
changing sourcemap: false in webpack.config.prod.js inside nodemodules/react-script/config
hopefully it will work for you too.

Resources