Skip to main content


Testing proves integrity and provides the ability to:

  1. Verify intent by exercising code it in various ways
  2. Provide confidence that is existing functionality still works when refactoring or adding new requirements

Write tests, not too many, mostly integration


Adopt two mindsets

  1. End User Experience - Input and Expected Output
  2. Developer Experience - Function

Don't be obsessed with code coverage. Safe guard the user from taking the unhappy path

1. High value/risk featuresE2ESignup, Login, Payment, etc.
2. Edge Cases in high value featuresIntegration/Unit
3. Things that are easy to breakIntegration/Unit
4. Component interaction testingIntegration/Unit


Being DRY in tests is bad for your

Integration Testing

Integration Tests


Mocking should be avoided if at all possible. It is better to combine two or more components in an integration test and interact with the components as the user would.

Use Mock Service Worker to mock APIs at the network level rather than excessively mocking at the component or service layer

Test Fixtures

  • Loading a database with a specific, known set of data
  • Erasing a hard disk and installing a known clean operating system installation
  • Copying a specific known set of files
  • Preparation of input data and set-up/creation of fake or mock objects


The more your tests resemble the way your software is used, the more confidence they can give you.

Design: Business logic exists in pure functions not than UI components. For example, a Shopping Cart UI component should not compute the cart total. As much possible push business logic to the Backend API.


Use Component Driven Development to save time and money.

UI Testing Handbook

Start from the most nested component, then come back to the root writing down interactions and expected outcomes.

📚 Isolate components using Storybook. Write test cases where each state is reproduced using props and mock data. ✅ Catch visual bugs and verify composition using Chromatic. 🐙 Verify interactions with Jest and Testing Library. ♿️ Audit accessibility of your components using Axe. 🔄 Verify user flows by writing end-to-end tests with Cypress. 🚥 Catch regressions by automatically running tests with GitHub Actions.

1. User interactions
2. Conditional rendering
3. Utils/Hooks


Setting up a test environment.


Snapshot vs traditional unit testing: Snapshot tests lack the expression of this intent. So for anything beyond the simplest of components, prefer traditional unit tests.


Difference between queryBy, getBy and findBy queries Checking for existence of an element Waiting for removal of an element Waiting for something to happen fireEvent() vs userEvent Mocking an event handler Avoid mocking by using Mock Service Worker Overriding MSW handlers Testing page navigation Suppressing console errors


Liberal on what you accept; mean on what you let pass


Testing is of critical importance to blockchain development.

Typescript Code

Heavily test type predicates. That will increase your confidence in the predicates, which will allow you to trust the type system as a whole.

Test function overloads to ensure the body is returning expected types. It's probably best to avoid them unless they solve a serious problem in your system.

Dev Stack

CypressSignup, Login, Payment, etc.
React Testing Library
Mock Service WorkerMock API


React Testing Crash Course
Testing & Error Handling with Next.js


Best strategy with a supabase connection with NX/Next.js?

Figma Diagrams