Training application on React
Simple React application created as a single page app (SPA) created on a training course, being used as the basis for a test tool comparison.
The main point here is testing
Testing tools
Enzyme
For components testing prior the actual development. TDD approach practice along with JS learning.
Cypress
For UI testing only. No Selenium Webdriver needed.
Cucumber + Selenium Webdriver
Good old Cucumber and Selenium for JavaScript.
TestCafe
For UI testing only. No Selenium Webdriver needed.
How to use
To get the app locally
# clone the repo
$ git clone https://github.com/artemdwo/simple-react-app-tested.git
# change directory to the project/directory
$ cd ~/to/the/project
# install all required dependencies
$ npm install
To run the app
$ npm start
To run component\unit tests
$ npm run test:co
To run UI tests with Cypress
To run the UI tests, you are going to need the App running.
Run the app in one terminal
$ npm start
Update BaseUrl in Cypress configuration file
Since npm start
may result server running on different ports or your setup may not have localhost due to any reason, you will have to change BaseUrl to whatever server accessible on:
Compiled successfully!
You can now view simple-react-app-tested in the browser.
Local: http://localhost:3002/
On Your Network: http://{ip.add.re.ss}:3002/
Note that the development build is not optimized.
To create a production build, use npm run build.
./cypress.json
{
"baseUrl": "http://localhost:3002"
}
Run the tests in a different terminal
Headless
$ npm run test:cy
In Chrome
$ npm run test:cy:chrome
Cypress UI
$ npx cypress open
Click on App.spec.js
in the list and you will see it running with all the details.
To run UI tests with Cucumber
Ensure you have the App running.
Otherwise, start the server before you proceed:
$ npm start
You'd need to update baseUrl with the port, if different from specified port directly in step definition file ../simple-react-app-tested/features/step-definitions/app-steps.js
LOC:3 where
return helpers.loadPage('http://localhost:{port}')
Cucumber JS with Chrome
$ npm run test:cu
Cucumber JS with Firefox
$ npm run test:cu:firefox
To run UI tests with TestCafe
Ensure you have the App running.
Otherwise, start the server before you proceed:
$ npm start
You'd need to update baseUrl with the port, if different from specified port directly in test
file ../simple-react-app-tested/testcafe/tc_first.test.js
LOC:3 where
fixture `homePage` .page `http://localhost:{port}`
TestCafe with Chrome
With the browser window
$ npm run test:tc
In headless mode
$ npm run test:tc:headless
TestCafe with Firefox
With the browser window
$ npm run test:tc:firefox
In headless mode
$ npm run test:tc:firefox:headless
TestCafe has live test execution support
npm install testcafe-live --save-dev
(included into package.json
) will allow you to automatically run\re-run tests whenever you make a change \ save a file.
... with Chrome
$ npm run test:tc:live:chrome
... with Firefox
$ npm run test:tc:live:firefox
Alternative baseUrl
You can also run the latest tests against Heroku hosted app on: https://simple-react-app-test.herokuapp.com