Cannot find module - Error when running tests on react project - reactjs

When i run yarn test locally on my React project i get this error (project is created with Create react app):
Cannot find module <project_directory>node_modules/babel-preset-react-app/node_modules/#babel/runtime/helpers/interopRequireDefault
Everything was normal and after adding react-responsive package, my tests started failing like this.
Even though they show that they fail, when i choose to run only failed tests, they don't run again. It's like they failed in their own way but not concerning the test process.
On the side note, when my tests run on CI/CD pipeline, they work with no problem.

After taking into consideration that CI/CD pipeline test run succeeds, i got to thinking that it could have to do something with my local environment.
Solution is to first clear cache in tests and than run tests again:
yarn test --clearCache
And that run
yarn test
NPM variant:
npm test -- --clearCache
And everything works fine now.
I found out on this issue that regards on a similar error but for a different module.
This answer gave me a solution
Issue in on create react app repo

Related

Fork pancakeswap frontend

Trying to fork pancakeswap from https://github.com/pancakeswap/pancake-frontend.
Steps what I did,
Clone Repo
Run npm install command
Run npm start command
Solve some no-used props error by commenting that props. After that also 2 errors are still in application.
Error1: JSX props should not use functions react/jsx-no-bind
Error2: defaultProp "expanded" has no corresponding propTypes declaration react/default-props-match-prop-types
Help me to solve this. Stuck more than 5 days. Searched many pages but no use. Most of them are suggested to change jsx functions. Is there is any simple way to solve these errors?
I did the same yesterday and it worked. There are still some elements that I need to figure out, but to make it running on localhost wasn't hard.
Before running pancakeswap frontend we need to have nodejs installed. Should work with any version 16, my was v16.14.0. Second is to have installed yarn as they don't use npm. This we know because the project has yarn.lock file. Third is have nextjs installed globally like yarn. With this we should be able to install and run the app.
Next steps would be:
Clone repo or just download it, will work as well
Run yarn install command (or just yarn - works the same)
Run yarn build (this will call next build)
Run yarn start (this will call next start)
After last step the app should start on localhost:3000
This is what I did and it worked. Keep in mind that this is valid for the current version and could change in future.

Is there a way of running jest tests sequentially in a Create React App application? [duplicate]

This question already has answers here:
How to run Jest tests sequentially?
(11 answers)
Closed 7 months ago.
I'm using the React Testing Library in an application created using Create React App. am finding that while some of my tests run fine by themselves, if I try and test all at the same time, then they start failing. I wanted to see if running the tests sequentially will get over this issue.
I can see you can run tests inline in jest, but didn't want to eject just to be able to send this parameter thru. I suspect that running all in parallel, is causing some of them to slow down and hence fail and running in series may get over the issue. Appreciate if can share the config to do this.
Basically you can add more jest options to the react-script test command as following (obviously the option you need here is --runInBand to make the test run sequentially):
package.json
{
"scripts": {
"test:runInBand": "react-scripts test --runInBand"
}
}
Then you run: npm run test:runInBand.
Or you can execute your current test with yarn (yarn would help you to pass the option down to test command), with this way you don't have to create any new script command:
yarn test --runInBand
// npm also offers the same thing by adding `--` to separate the options
// just been aware of that lately via the comment below
npm test -- --runInBand

'Failed to minify the code from this file' appearing in create-react-app when trying to build production

I have created a react project using Create-React-App and now would like generate the production build. When I use npm run build I am getting the error:
Failed to minify the code from this file:
./node_modules/pify/index.js:3
Create-React-App suggests the following corses of action:
To resolve this:
Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled.
Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
will take to long and seems to already be a issue (#50) raised for pify.
I am not sure how I would approach but I think it may be the best option
is not going to work because it is a dependency of a different package.
What I am looking for is come guidance on how to solve this solution before I use option 2 and rewrite a whole package.
I belive the solution would involve ejecting from create-react-app and messing with the webpack config file.

yarn test - Network request failed [duplicate]

This question already has an answer here:
Yarn test failing - Network request failed
(1 answer)
Closed 5 years ago.
created a react project using create-react-app however when I go to run yarn test to see if the initial tests pass I get
/home/afenwick/Development/road-to-react-learning/node_modules/react-scripts/scripts/test.js:22
throw err;
^
TypeError: Network request failed`
error Command failed with exit code 1.
If I set up a brand new app it works totally fine, have not made any changes to App.test.js, just trying to run the default test. yarn start works fine, spins up my app in the browser.
Have tried deleting node_modules
Also tried npm install instead and npm run tests but that doesnt install my dependencies and then also errors the tests.
OS: Antergos Linux
Github repo: https://github.com/Fenwick17/road-to-react-learning
Stepped through my commits to locate the issue, and appears to be caused in https://github.com/Fenwick17/road-to-react-learning/commit/4b6069181a39861e531b550ebb8689695db042bb so I will work through the changes to rectify.
I also ran into this problem when following the book entitled "The Road to Learn React" and I think that the one causing this error is the part where fetch is called. The book forgot to include an import for fetch which is this one:
import fetch from 'isomorphic-fetch'
Then, it solves my problem like a charm. Hope this help.

Newbie to Selenium E2E with React

I created a boilerplate React project, packages.json has the usual suspects:
prestart
start
list
test
etc.
I am using Selenium for my E2E framework. I have the following test:
it('should launch a browser', () => {
const By = webDriver.By;
let driver = new webDriver.Builder()
.forBrowser('chrome')
.build();
// verify Continue button exist on page
driver.navigate().to('http://localhost:3000').then(() => driver.findElement(By.id('submitButton')).getAttribute('value'))
.then(buttonValue => expect(buttonValue).toEqual('Continue'));
});
If I do npm start, my site launches and my E2E launches an additional Chrome browser and navigate to my running site: localhost:3000. The test succeeds.
My question is, how do I run my E2E separately, without the need to my site side by side using npm start.
I am newbie to React and Selenium, in case I am missing a lot of information on this post, I apologize in advance.
Well, since you didn't find the time to update the question information with the NPM "scripts" object, then I'll try to give it a shot in the dark.
First of all, due to your wording, I can interpret your question two ways:
a.) you want to run your E2E tests separately, w/o your server running (which is started via npm start);
b.) you want to run your E2E tests via npm start, without triggering your server from starting;
a.) If you want to run your scripts separately, seeing as you are using Mocha, then you can trigger them via: ./node_modules/.bin/mocha <pathToTests>/<testFile>.
Now, since you stated in your question that you're using npm test script, then that should be the best switch to bind your E2E tests execution to:
package.json (Scripts object):
"scripts": {
"test": "mocha --reporter spec <pathToTests>/<testFile>",
"start": "node <yourServerName>.js"
},
Please note that mocha <pathToTests>/<testFile> is equivalent to ./node_modules/.bin/mocha <pathToTests>/<testFile>, because NPM looks for binaries inside node_modules/.bin and when Mocha was installed, it installed it into this directory.
Note: Many packages have a bin, or .bin section, declaring scripts that can be called from NPM similar to Mocha. If you want to find out what other binaries you can run that way, just issue a ls node_modules/.bin.
b.) In this care, I think your issue might be due to NPM defaulting some script values based on package contents. Specifically, if you have a server.js file in the root of your package, then npm will default the start command to server.js.
So if you're starting your E2E tests via npm start, having this ("start": "mocha <pathToTests>/<testFile>") in your package.json and there is a server.js file in the root of your package, then npm will default the start command to node server.js.
In which case, you could either move your server script to another place in the project, or change the switch you're using to trigger the E2E tests (see section b.)).
Hope this solves your problem and if not, looking forward for that package.json "scripts" object so we can really see what's up. :)
Cheers!

Resources