Frontend Testing

Frontend testing is complicated and large in scope. Here, we attempt to summarize frontend testing to give you a sense of how much you have to manage.

Testing Principles

• General
  • Test early & often
  • Don’t couple tests with implementation details
  • Don’t test implementation logic
  • AAA - Explicit test structure with Arrange, Act & Assert
  • Refactor when mocking/writing test gets complicated
• Unit testing-specific
  • Fast
  • Isolated - run in isolation without deps
  • Repeatable/Deterministic - can run many times with same results
  • Self-checking - automated without anyone checking
  • Timely - unit test writing time should be reasonable
  • Readable - easy to read and the serves as documentation
• Frontend-specific
  • Test based on how it is used
  • Prefer testing with HTML semantics queries with selectors that are HTML5 & ARIA compliant over test IDs
    Note: role, lable, text >>> HTML5, ARIA >>> data-testid

Types

Test	Purpose	Examples
Unit Test	- Ensure functionality - Ensure safe refactoring - self-documenting - Regression protection	- Jasmine - Mocha - Jest - Sinon - Chai - Cucumber
Integration Test	Interactions between app components (ie. API requests, browser APIs, DOM)	- react-testing-library - EnzymeJS - msw.js (API call mocks)
Accessibility Test	Check based on WCAG rules & other best practices	- Axe (catches 57% of WCAG issues) - Chrome devtools/manual (most accurrate) - Chrome Lighthouse - Storybook
Snapshot Test	Compare rendered markup, for smoke testing & ensure DOM doesn’t change	- Jest - Storyshots
Visual Test	Catch bugs in UI appearances by comparing screenshots, for verifying appearance	- storybook (manual) - jest-image-snapshot - Chromatic More
E2E Test	Test based on user’s perspective, simulate real-world scenario	- cypress - selenium - playwright
Pen Test	Security, used right before production	- OWASP Zed Attack Proxy (ZAP) - sqlmap

Note: we should also consider cross browser testing too.

React-specific testing

Type	Example
Hook	react-hooks-testing-library
User Events	@testing-library/user-event

Process

• Github PR templates
  • Create PR templates with checklist to remind submitter & reviewers to check if tests are added or updated
• Github Actions - use it to test often & early
  • Generate unit test reports
  • Understand test coverage
• Git hooks - use it to check to be commited code
  • Check if we are skipping tests
• Linter
  • For testing React, use ESLint plugins like eslint-plugin-testing-library and eslint-plugin-jest-dom

Checklist

• High unit testing coverage (~80%)
  The purpose is to have confidence in correctness. This is subjective based on the project. Aim to test critical flows (statement & branch) or high “functionality coverage”. If it takes huge efforts just for the last 5%, it might not be worth it.

• Align on test file location
  Whether to Colocate or Separate test files, make a decision.

• Check if you are skipping tests or only testing some times
  Jest test.only or test.skip might be used somewhere while in development and it’s easy to commit & push to remote for PR

• Make sure mock reflects reality, otherwise, it will give you false idea of quality
  Sometimes testing

• Keep up-to-date on test framework updates