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
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