create react app : configure Jest : Run all test files - reactjs

I would like to configure npm test in my server. when I run npm test, it invokes react-scripts test which triggers a prompt window ( attached screen ). How do I avoid the prompt and run all testcases in the server.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"lint": "./node_modules/.bin/eslint ."
},


To run all the tests, use "test": "react-scripts test --watchAll=false"


If you pass CI=true, it will run once without setting up that prompt as described at https://create-react-app.dev/docs/running-tests/#linux-macos-bash:
CI=true npm test


When you want to run all tests you can use npm test --watchAll


You can just update your package.json and in the scripts section update the test one with just "test": "jest"
It should run every test file that it can find in your project

Related

serve package from npm didn't work with React

I want to try the serve package with a React App by doing the following step:
npm install serve --s
then replace the npm start command in package.json like this:
scripts": {
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test",
...
},
and then I run npm start i got the error in the console "Uncaught SyntaxError: Unexpected token '<'" etc
however if I uninstall serve --s and put back the package.json like this :
scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
...
},
and then run npm start again it work fine on my local machine, so i think i am doing something wrong in the process and i would like to know why I have issue with the serve package.

Looks like you haven't built your /build folder with app bundle. It must be like this:
npm start - to run and edit code
npm run build - to build a bundle(creates/rebuild a /build folder)
serve -s build - serve/start the /build folder

Refresh current page automatically when script changes

In recent react app I install nodemon globally and modified package.json to add dev command like this:
"scripts": {
"start": "react-scripts start",
"dev": "nodemon ./app.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I start the app like this npm run dev but problem in any changes the development server start again opening new tab. How I make only current tab refreshed ?

Why not simply use npm start?
react-scripts start sets up the development environment and starts a server, as well as hot module reloading. Read more here.

react-scripts: command not found in react app

Im running a react-app on localhost and this error popped out. I have installed the correct dependencies with npm install, but for a reason i don't know it doesn't find the command react-scripts.

Nice to meet you.
Please check your node version.
After setup your node.exe.
And set the below contents to your package.json file.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Then please execute the command line.
"npm start"
Best regards.

how do I run/finish test stript in github action yml file?

in my react app I have scripts:
"test": "react-scripts test --env=jsdom",
"test:coverage": "yarn test --coverage --watchAll",
// in my yml file:
- name: Yarn install, Build and Test
run: |
yarn
yarn test:coverage
yarn build
how do I quit watch mode when the test is finished? because in github actions when it runs it just hangs in there infinite time.

Just create another command for local usage with --watchAll. Example:
"test": "react-scripts test --env=jsdom",
"test:coverage": "yarn test --coverage",
"test:coverage-watch": "yarn test:coverage --watchAll"

How to set build .env variables when running create-react-app build script?

I'm using the following environment variable in my create-react-app:
console.log(process.env.REACT_APP_API_URL) // http://localhost:5555
It works when I run npm start by reading a .env file:
REACT_APP_API_URL=http://localhost:5555
How do I set a different value like http://localhost:1234 when executing a npm run build?
This is my package.json file:
{
"name": "webapp",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.9.0"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

I imagine you got this working by now, but for anyone else that finds this, you set your default environment variables in a .env file at the root of your "create-react-app" project.
To separate out the variables used when using npm start and npm run build you can create two more env files - .env.development and .env.production.
npm start will set REACT_APP_NODE_ENV to development, and so it will automatically use the .env.development file, and npm run build sets REACT_APP_NODE_ENV to production, and so it will automatically use .env.production. Values set in these will override the values in your .env.
If you're working with other people, and have values specific to your machine only, you can override values in .env.development and .env.production by adding those values to a new file - .env.development.local and .env.production.local respectively.
EDIT: I should point out that the environment variables you have set must start with "REACT_APP_", eg. "REACT_APP_MY_ENV_VALUE".
EDIT 2: if you need more than just development, and production, use env-cmd, as specified by this comment.

You can use the process.env.NODE_ENV like so:
const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;
You would need to have REACT_APP_PROD_API_URL and REACT_APP_DEV_API_URL set.
Or, if the production URL is always the same, you could simplify it:
const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;
Create React App sets the NODE_ENV to 'production' for you on build, so you don't need to worry about when to set it to production.
Note: you must restart your server (e.g. run npm start again) to detect environment variable changes.

If you'd like to have separate dotenv files for building and/or deploying to separate environments (stage, prod) then you can use env-cmd like so:
npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build
Then just update your package.json accordingly:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:stage": "env-cmd -f ./.stage.env npm run-script build"
},
Then to build you'd just run this shell command:
npm run build:stage

Also, it can be done without additional dependency:
"scripts": {
"build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
"build:staging": "REACT_APP_ENV=staging npm run build",
"build:production": "REACT_APP_ENV=production npm run build"
},
And have .env.staging, .env.production files accordingly

install 'env-cmd' package
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build",
"start:qa": "env-cmd -f .env.qa react-scripts start",
"build:qa": "env-cmd -f .env.qa react-scripts build"
},
in local if we want to run qa environment use
npm run start:qa

If you are using Heroku for deployment, then follow this:
Go to your app settings >> click on 'Reveal Config Vars' button
Add your variables
Use them in the app in the same way as you are using previously ex. process.env.REACT_APP_VARIABLE_NAME
Re-Deploy the app
and that's it...

Resources