The pyramid above describes the three types of tests in the Product Catalog fronted. We should follow the pyramid structure - where the bottom layer (Unit) has the most number of tests, while the top-level (E2E) has the lowest number of tests.
Unit Tests
Purpose: Function testing or Rendering of a single component
Tool: jest + react testing library
Mock: everything except the unit being tested
Integration
Purpose: Verify several units working together
Tool: jest + react testing library
Mock: as little as possible. Only mock:
Network requests (GraphQL API calls, other API calls)
Animation components (so that tests don’t need to wait)
E2E
Purpose: Verify that the entire system functions correctly
Tool: cypress
Mock: nothing
Run against the entire application setup (backend + frontend)
Backend spinned up using Docker with a test data set before tests start