🏠 Home

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


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

Note: we should also consider cross browser testing too.

React-specific testing

User Events@testing-library/user-event


  • 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


  • 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