This is a cloned repository of the React Job Simulator course. The starting codebase has been repurposed as a showcase of QA automated testing alongside feature development.
The history of the project will show features and fixes implemented from tickets and designs and the tests to accompany those tasks.
The application mimicks an error logging and monitoring tool similar to Sentry or Rollbar.
This project is built with Next.js, TypeScript, Cypress & SCSS modules among others. To start working on the project, first clone the repository on your local machine and install the dependencies.
npm installIf these are any warnings or vulnerabilities we're going to have to start the npm dance with:
npm audit fix --force
...
npm installAfter that, follow any errors and fix the errors by chagning the versions of packages in the package.json file. But! before manually playing with individual package versions try:
npm updateAnd then npm install shouldn't throw any errors. If it does, keep on keeping on with the npm dance we all love and care about.
copy the .env.template file to a new file called .env. This file contains the required environment variables that are injected by Next.js via the dotenv package.
Finally, run the development server:
npm run devNow you can open http://localhost:3000/dashboard with your browser to see the application.
** Per the React Job Simulator recommendations **
This project uses tools like ESLint, Stylelint, and Prettier. To make the most of these tools it's recommended to install the corresponding extensions. For VS Code those are:
- ESLint
- Stylelint
- Prettier
- SCSS IntelliSense (e.g. for auto-completion of SCSS variables)
- React CSS modules (e.g. to open the CSS class definition with CMD/Ctrl + click and warn about non-existent class names)
The official Stylelint extension might need some adjustment of your settings.json file. If it doesn't work out of the box try adding these lines:
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": ["css", "scss"],
Additional extensions that I find very valuable are
Code Spell Checker GitLens SVG GitHub Copilot (paid)
This project is covered with Cypress tests. Although most tests for production apps are currently written with React Testing Library, Cypress is the best option to get started with testing. When you're new to testing the start can be very cumbersome and feel like you're in a completely new dev environment.
Cypress makes it much easier to get started with testing. You still have to get used to the new way of coding but thanks to its awesome UI debugging is easy and very similar to what you're used from your browser.
To run the Cypress tests on your local machine use this command:
npm run cypressStorybook is a great tool to document your components and visually test them in isolation. To open Storybook run
npm run storybook