I'm learning ReactJS for a few weeks but I'm facing an issue that's impossible to solve by myself.
I use create-react-app command to start react project but it is totally impossible to use npm test after that. Even if I don't touch anything in the project, when I try to run npm test I only get "No tests found, exiting with code 0".... When I just create the project there is src/App.test.js but the command found nothing..... :(
Someone I sent the folder succeeded to run the tests.... is it possible that the problem comes from my computer/environment (Windows 10) ?
Thanks for help.
Have a good day
Add this line to your "package.json"
open package.json
find scripts in that "test" : "react scripts test" replace this with
"test": "react-scripts test --watchAll --testMatch **/src/**/*.test.js"
Now run npm test.
It works!
Got it!
I found this posts https://github.com/facebook/create-react-app/issues/7660
wich explain that npm test don't work with hidden directories (.xxx).
My projet is under C:\Users\kendr\.babun\cygwin\home\Kendrak\react\myprojet
The problem is the .babun !
I move my project in another dir and the test command now works fine!
If you are CRA(Create React App) user who is seeking proper answer, try this out in package.json.
`
{
"name": "Your App",
"jest": {
"testMatch": [
"<rootDir>/src/**/*.test.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
]
},
"version": "0.1.0",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --watchAll=false",
"eject": "react-scripts eject"
}
}
`
CRA manages jest in package.json. So if you use jest.configure.js in parent route you will get error about route something.
If you want another custom configuration give a changetestMatch.
As answered by #Kenkradstef, there can be issues with the path your project is in.
Had the same problem, with "[" "]" in my path. Full path was something like "C:\Users\xxx\[P]rojects\xxx\".
I moved the project to a different location and it worked.
Can't add a comment because I have no reputation, that's why I am posting this as an answer.
Related
In the React file structure under components there is index.js file that runs the main character when running the project. Is there anyway to rename this file to any name I want? I am using PM2 server manager and there is no way for me to keep track which server is which when running multiple index.js files. So the only option I got is to rename this index.js to something specific to each project.
I have tried changing the package.json file's start script as below but nothing worked out only gave errors.
"scripts": {
"start": "test.js react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Appreciate all your help!
You can't change the name of the file used by create-react-path.
You'll have to either eject to use custom webpack config by running
npm run eject
But it's a one-way operation (see documentation)
Or you can use Vite instead of create-react-app to bundle your project.
Vite is more configurable than create-react-app, you define in the index.html the name of your js file. So you can put any name you want.
Maybe even this example could help you:
https://vitejs.dev/guide/ssr.html#example-projects
I have an application that is a combination of a node middleware server and a next.js front end gui with react components. It was running ok, but then, when I tried to build it in production mode, I keep getting the following error:
UnhandledPromiseRejectionWarning: Error: Cannot find module 'C:\Users\mgardner\workspace\qa-tool-backoffice\.next\prerender-manifest.json'
Require stack:
- C:\Users\mgardner\workspace\qa-tool-backoffice\node_modules\next\dist\next-server\server\next-server.js
- C:\Users\mgardner\workspace\qa-tool-backoffice\node_modules\next\dist\server\next.js
- C:\Users\mgardner\workspace\qa-tool-backoffice\server.js
I'm a little confused as to how to get the next front end to run concurrently with the node/express server. Here's my package.json file:
{
"name": "ibo-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"mockdb": "json-server --watch public/mockdb.json --port 3001",
"dev": "concurrently --kill-others \"json-server --watch public/mockdb.json --port 3001\" \"npm start\"",
"build": "next build",
"start": "node server.js && next start"
},
The reason this was happening was because my next build process was failing. It was failing because I had some old react functions in the public pages folder.
The issue was that my pages not generated at build time in Nextjs correctly due my path included not correctly try to check your page collecting data fully and pages generated correctly.
I'm using React version 17.0.1 on windows and I've noticed that the create-react-app hot reload doesn't work. I found some tips online (Development server of create-react-app does not auto refresh for example ) and tried every one of them (my path doesn't include parentheses, it isn't synced to google drive or dropbox, I've tried the watcher refresh and reinstalling the node modules). Nothing worked until I realized that the problem occurs only with the index.js file. If I save any other file (html or components) the browser does reload automatically. I've read that this might be a bug with the newer version of React that was released just days before I started studying this subject.
One thing I should mention is that my npm start script (that was automatically generated) is different than the ones I saw on the other threads (Auto reload react server on update for example), It doesn't says "Webpack" at all and I thought it maybe have something to do with my problem.
From the package.json file:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Is there any way around this bug? Is this problem familiar?
I made a simple react app, and wanted to deploy it.
At first, I tried npm run build. I got "The project was built assuming it is hosted at the server root."
I needed to deploy the app to my web server, so found a solution that worked:
set PUBLIC_URL=http://example.com/sampleDir&&npm run build
However, the next time I type npm run build, the message is always The project was built assuming it is hosted at "whatever path I set just before".
I tried set PUBLIC_URL='root' to set back to the original condition. But the message I got after executing npm run build was not the same as the first time.
Rather it said: "The project was built assuming it is hosted at root/."
If anyone knows, please let me know how to return this situation to the original: "The project was built assuming it is hosted at the server root."
1.
Unfortunately, my command line does not recognize 'unset':
'unset' is not recognized as an internal or external command, operable program or batch file.
(it seems that your way should work fine, and other google searches support it... I'll have to search more about it later)
Fortunately, though, the next line worked:
set PUBLIC_URL=&&npm run build
I'm not sure why... probably because I'm using cmder as my command line???
2.
Your package.json advice was tried, too.
My original package.json was like below:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
And, I changed it into yours:
"scripts": {
"build": "node scripts/build.js",
"build:sample": "PUBLIC_URL=http://example.com/sampleDir npm run build"
}
Then, I got an error message... (I'm not sure what this error exactly means...)
internal/modules/cjs/loader.js:584
throw err;
^
Error: Cannot find module 'C:\MyLocalDevFolder\scripts\build.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Anyway, after more searches, I could do what I want without contaminating the environment, adding the code below after the original "scripts" property in the package.json:
"homepage": "http://example.com/sampleDir/",
Thank you again for your advice, Tholle~
Happy coding~~~
I've created an React app with create-react-app and I want to deploy it to Back4App.
The problem is I want to deploy the build folder and not the public folder (which I understand is the default for Back4App / ParsePlatform).
So far, I haven't found any way to config deploy to use anything other than the public folder.
Any solution / workaround to this?
If you are using B4A CLI, one of the easiest ways to deploy a create-react-app is, firstly, changing the build script into your package.json as below snippet:
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && cp -r build/* {{PATH-TO-YOUR-B4A-APP}}/public",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
As you can see, you just need to move all content inside create-react-app build folder to the public folder of your cloud code. After that, move to your app path and run b4a deploy.
Also, you could add a step to clear all public folder content before move the new stuff, but be careful with this step.
Otherwise, you could access the Back4app Parse-Dashboard into the Cloud Code Functions and deploy all the build stuff in public folder using the browser interface.
This is a live demo of a create-react-app deployed in Back4App.