💬 Note from maintainers
This application is purely for demonstration and educational purposes. Its setup and configuration resemble typical real-world applications, but it's not a full-fledge production system. Use this app to learn, experiment, tinker, and practice application testing with Cypress.
Happy Testing
Features
🛠 Built with React, XState, Express, lowdb, Material-UI and TypeScript
⚡️ Zero database dependencies
🚀 Full-stack Express/React application with real-world features and tests
👮♂️ Local Authentication
🔥 Database Seeding with End-to-end Tests
💻 CI/CD + Cypress Dashboard
Getting Started
The Cypress Real-World App (RWA) is a full-stack Express/React application backed by a local JSON database (lowdb).
The app is bundled with example data (data/database.json) that contains everything you need to start using the app and run tests out-of-the-box.
🚩 Note
You can login to the app with any of the example app users. The default password for all users is
s3cret.
Example users can be seen by runningyarn list:dev:users.
Prerequisites
The only requirement for this project is to have Node.js version 12 installed on your machine. Refer to the .node-version file for the exact version.
TypeScript will be added as a local dependency to the project, so no need to install it.
Installation
yarn install
Run the app
yarn dev
Start Cypress
yarn cypress:open
Tests, Type, Location, ----, ----------------------------------------, api, cypress/tests/api, ui, cypress/tests/ui, unit, src/__tests__, ## Database
-
The local JSON database located in data/database.json and is managed with lowdb.
-
The database is reseeded each time the application is started (via
yarn dev). Database seeding is done in between each Cypress End-to-End test. -
Updates via the React frontend are sent to the Express server and handled by a set of database utilities
-
Generate a new database using
yarn db:seed. -
An empty database seed is provided along with a script (
yarn start:empty) to view the application without data.
Additional NPM Scripts, Script, Description, --------------, -------------------------------------------------------------------, dev, Starts backend in watch mode and frontend, start, Starts backend and frontend, types, Validates types, db:seed, Generates fresh database seeds for json files in /data, start:empty, Starts backend, frontend and Cypress with empty database seed, tsnode, Customized ts-node command to get around react-scripts restrictions, list:dev:users, Provides id and username for users in the dev database, For a complete list of scripts see package.json
Code Coverage Report
The Cypress Real-World App uses the @cypress/code-coverage plugin to generate code coverage reports for the app frontend and backend.
To generate a code coverage report:
- Run
yarn cypress:run --env coverage=trueand wait for the test run to complete. - Once the test run is complete, you can view the report at
coverage/index.html.
License
This project is licensed under the terms of the MIT license.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!