nkey / qake-react-with-cypress

React with Cypress 🌲

This project is a Component Testing example using JavaScript, React and Cypress.

Features 🧪

• NodeJS
• Cypress
• ReactJs

Requirements 📚

• node >= ^16.x - Node installation
• npm >= ^8.x - NPM installation (or yarn)

Getting Started

Install the dependencies:

npm install

Run application:

npm run start

Run tests in headless mode:

npm run test:headless

Run tests with Cypress GUI:

npm run test

Coverage Tests 📈

After running the component tests using cypress, you are able to run the tests coverage: (you need to configure the index.html path in your package.json file)

For Windows:

npm run code:coverage

For MacOS

npm run code:coverage:mac

Build a container 🐳

docker-compose build

Run this container 🐋

docker-compose up -d && docker ps && docker inspect -f '{{range.NetworkSettings.Networks}}{{.IPAddress}}{{end}}' app && docker logs app

Run "Cypress Run" in container 🌲

echo 'Cypress gonna run!!' && docker ps && docker exec app ls && docker exec app npm run test:headless

Run Eslint in container

echo 'Eslint gonna run!!' && docker exec app npx eslint src/*.js -f json -o ./report/eslint-report.json

Stop docker! 🚫🐳

docker-compose stop

Contributing 👨‍💻🤝

Feel free to complement/report something in pull requests. The project is ours! 🤝