Skip to content

An example scaffolding from scratch for React SPA with CI using Github Actions that cover, linting, formatting, unit testing, e2e testing, visual regression, security scanning, coverage, performance checking, accessibility and simple deployment to github pages

Notifications You must be signed in to change notification settings

Loonz806/setup-example

Repository files navigation

JavaScript Style Guide code style: prettier Commitizen friendly Github Actions CI This project is using Percy.io for visual regression testing. Quality Gate Status Known Vulnerabilities

Setup Example

To install

npm install

Showing some setup that is needed for adding jest, testing-library, some eslint configs and also some pre/push tasks using husky/lint-staged

inspired by Ken C. Dodds Javascript Testing

Utilities to aid in enforcement

  • Lint-Staged ( catch unlinted files before they get pushed into expensive build times in CI )
  • Husky ( if you use git, this is very handy to have actions trigger )
  • Github Actions ( Githubs CI tool, tasker )
  • Editor Config ( Not all IDE's are configured the same )

Eslint ( Static Code Analysis )

having good linting practices in a greenfield project is always a good way to establish consistent coding patterns and fixing errors in this example StandardJS is being used, less config the better

Eslint Command

npm run lint

full config of eslint plugins/configs found in the .eslintrc

or automatically if a husky git hook is enabled via .huskyrc file, if linting is bypassed with --no-verify it is caught with .lintstagedrc this also is helpful with folks who don't use IDE's and perhaps use text-editors or other tooling. It is also in the CI/CD checks in Github Actions upstream

Prettier ( Opinionated code formatter )

having unformatted code automatically become formatted by respecting linting rules first and then prettier default settings you can see the configuration by reviewing the .eslintrc file

Prettier Command

npm run pretty

a format command is helpful to run over entire projects as well

or automatically if a husky git hook is enabled via .huskyrc file, if formatting is bypassed with --no-verify it is caught with .lintstagedrc this also is helpful with folks who don't use IDE's and perhaps use text-editors or other tooling. It is also in the CI/CD checks in Github Actions upstream

Jest/React Testing Library ( Unit testing Functions and also DOM Assertion )

addresses unit testing of any application running React by using two libraries that complement each other Jest and React Testing Library

Test Command

npm run test

or even npm run coverage which outputs a report of the unit coverage

or automatically if a husky git hook is enabled via .huskyrc file, if testing is bypassed with --no-verify it is caught in the CI/CD checks in Github Actions upstream

Useful Chrome Extension - https://chrome.google.com/webstore/detail/testing-library-which-que/olmmagdolfehlpjmbkmondggbebeimoh?hl=en-US

Commitlint ( Commit messages that connect to JIRA tickets )

addresses meaningless commit history that often doesn't speak to what ticket, concept or idea nor attached to JIRA automatically on code changes

Runs automatically on commit-msg hook, strongly opinionated but not enforced. Configuration file is commitlint.config.js and is envoked via the .huskyrc file

More meaningful commit messages evoked by

npm run commit

Github Actions ( Some github hosted CI actions that can be run branch dependant )

runs linting, testing and building and deployment to github pages on primary branch and/or branches opened for pull request

Similar to other tools like TravisCI, CircleCI, GitLab, Bitbucket, Codepipeline etc. Configuration found in .github/workflows

Github Actions

Cypress ( Running against a local build before deploying but can be modified )

runs e2e testing against browsers such as Chrome, Edge and Firefox to do some actual dom assertions covering lions share of browsers

Similar to other tools like TravisCI, CircleCI, GitLab, Bitbucket, Codepipeline etc. Configuration found in .github/workflows Runs as a dependency in CI as well for deployment but can be modified via the Github Action

To run locally via GUI ( be sure to have application running on separate terminal)

npx open cypress

Or the headless report

npm run e2e:test

Which downloads the latest browserlist and runs e2e's on it.

Userful Chrome Extensions (Cypress Recorder Chrome Extension)[https://chrome.google.com/webstore/detail/cypress-recorder/glcapdcacdfkokcmicllhcjigeodacab?hl=en-US]

Percy ( Running visual regression testing in the e2e test suite in which needs approval from QA to be passing )

snap shots at/in the cypress e2e testing creates a screen comparison tool for regression for visuals that is automated and can scale against browsers such as Chrome, Edge and Firefox

Similar to other tools like TravisCI, CircleCI, GitLab, Bitbucket, Codepipeline etc. Configuration found in .github/workflows Runs as a dependency in CI as well for deployment but can be modified via the Github Action

Percy works with BrowserStack account and can give emails on visually changes in application for visual regression review.

Lighthouse CI ( Running performance testing in the CI build via Github Actions )

regresses individual builds against the preset for non:pwa application standards and also is configurable

Similar to other tools like TravisCI, CircleCI, GitLab, Bitbucket, Codepipeline etc. Configuration found in .github/workflows Runs as a dependency in CI as well for deployment but can be modified via the Github Action

regress individual builds against the a11y recommended axe-core library for introductions of malformed html, mislabeled aria-roles

Code is folded into the cypress e2e testing suite. Similar to other tools like TravisCI, CircleCI, GitLab, Bitbucket, Codepipeline etc. Configuration found in .github/workflows Runs as a dependency in CI as well for deployment but can be modified via the Github Action

Useful Chrome Extensions (axe DevTools - Web Accessibility Testing)[https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US]

Uses a helpful pattern/library component repo that organizes code into reusable components and utilities that can be tested, verified seperately

npm run storybook

About

An example scaffolding from scratch for React SPA with CI using Github Actions that cover, linting, formatting, unit testing, e2e testing, visual regression, security scanning, coverage, performance checking, accessibility and simple deployment to github pages

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages