Newbie to Selenium E2E with React - reactjs

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!

Related

Cannot find module - Error when running tests on react project

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

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

Difference between "npm run dev" and "npm start"

I am very new to Node and AngularJS.
Can I know the difference between npm run dev and npm start commands in node terminal?
You can look it up in the package.json. The section which you are looking for is named scripts.
This answer is based on Next js, however, I think the case is similar to angular js in this regard
npm run dev is used to view or run the application worked on while in development mode to see active changes while npm start on the other hand cannot be run until npm build has been run which is usually when the project/ application has reached a MVP or presentation stage...the application is probably ready for use at that stage that's when npm start is used

Running Jest tests on Appveyor from powershell

I am trying to run my Jest tests on Appveyor. I am using the asp.net core template for a react app (which uses create-react-app). When I run the tests locally (with npm run test) the tests run fine, I see PASS src\App.test.js with a run-down of the tests that have passed.
In Appveyor, however, an error is thrown from the console, causing my build to fail. The error message is PASS src\App.test.js. So it would seem an error is being emitted from the run somehow, despite the fact it seems to actually be passing. I checked and $LASTEXITCODE is -1
App.Test.js
it('Runs tests', () => {
expect(true).toBeTruthy();
});
Appveyor.yml
test_script:
- ps: .\build\appveyor\js-tests.ps1
.\build\appveyor\js-tests.ps1
($env:CI = $true) -and (npm run test)
I'm setting the CI environment as this prevents the tests from using "watch". the js-tests script does some other stuff with sorting file locations and a bit of logging etc, but I don't think that is relevant giving the message comes back as a passed test.
Npm sometimes writes normal output to stdErr, which custom PowerShell host on AppVeyor treats as error. Solution is to run those tests in CMD. So wrap them int .cmd file and run with - cmd: prefix.
An alternative to #ilyaf 's answer was to use jest-silent-reporter, which does not give an output when tests pass. This works for the same reason ilyaf's answer does, because npm writes output to stderr, not writing anything solves it.
to install:
npm install jest-silent-reporter --save-dev
in your package.json
"scripts": {
"test": "react-scripts test --env=jsdom --reporters jest-silent-reporter",
},
note i define the reporter here.
I'd also recommend adding a log after calling npm test so your logs have some confirmation that the thing has run.

npm test does not detect new test file changes in jenkins

Jenkins/jest and CI ,
I have created a react APP using create-react-app and I use JEST for testing and I did some new changes in a file created app.test.js and committed to git-hub- hooked it with jenkins -when I run npm test in the local machine the tests are run fine and they all pass ..
BUT when i run the jenkins pipeline script it says the following :
No tests found related to files changed since last commit.
Press a to run all tests, or run Jest with --watchAll.
Watch Usage
› Press a to run all tests.
› Press p to filter by a filename regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
I have tried changing app.test.js -created a new file commit changes and then created a new pipeline in jenkins and tried again ( I have also tried these discussed here :https://github.com/facebookincubator/create-react-app/issues/930) but I still get the above error : my pipeline script is shown below:
node{
stage "CI"
git 'https://github.com/NaveenDK/mentalshortcuts.git'
bat "npm install"
stage " Unit testing"
bat "npm test"
}
def notify(status){
emailext (
to: "dd#dd.com",
subject: "${status}: Job '${env.JOB_NAME} [${env.BUILD_NUMBER}]'",
body: """<p>${status}: Job '${env.JOB_NAME} [${env.BUILD_NUMBER}]':</p>
<p>Check console output at <a href='${env.BUILD_URL}'>${env.JOB_NAME} [${env.BUILD_NUMBER}]</a></p>""",
)
}
node {
notify("Deploy to staging?")
}
input 'Deploy to Staging?'
node {
bat "npm run-script build"
}
Any help any links anything at all would be great!
The tests did not run on jenkins as Jenkins was running on Windows, and Windows doesn't support glob, which is src/**/*.js.
this problem was not encountered when the project was build on Jenkins that was installed on a Linux OS!
I also faced the same issue. As mentioned above by Naveen, Windows doesn't support glob, which is src/**/*.js.
That's why in Jenkins configuration, change the label to Linux. Check here to see a preview.
Jenkins configuration
And then in the build section, add the following line as shell commands:
npm install
npm run build
CI=true npm test
Always run npm install first. It will install all the packages.
Then run npm run build to build the app
In the end, make sure to write CI=true npm test. It will run test cases only once. If you write npm test instead, then it will run the test and go into watch mode forever.
I hope this helps.
I encounter this problem on my local machine like this,
"test": "jest --watchAll"

Resources