Schedule > UI Testing: Introduction
Schedule > UI Testing: Introduction
Today is about writing useful tests for a real React + TypeScript codebase (the TMA UI), without turning testing into busywork.
1. Categories of Tests
Different kinds of code require different approaches to testing. In front-end development with React, there are a few different genres:
|
1. Unit tests
Required for new/changed logic |
For: pure functions (utilities, small helpers)
Checks for: given input X, output is Y (no DOM, no React, no network)
Examples:
|
|---|---|
|
2. Component tests
Required for new/changed user-visible behavior |
For: React components/pages
Checks for: user-visible behavior (what renders, what text appears, what state is shown)
Examples:
|
|
3. Provider / hook tests
Required if auth/session/role/persistence logic changes |
For: Context providers and custom hooks
Checks for: state transitions + side effects (auth checking, persistence, redirects)
Examples:
|
|
4. API-layer tests
Optional
|
For: frontend API wrapper functions
Checks for: URL/header/body building + consistent error handling
Examples:
|
|
5. Integration-ish UI tests
Optional
|
For: a critical flow spanning multiple components (sometimes routing)
Checks that: “this flow works end-to-end inside React,” without a real browser
Example: one login flow test (for later)
|
|
6. E2E tests
Optional
|
For: real browser + real app (Playwright/Cypress)
Checks for: the whole stack behaves correctly from a user’s perspective
Why not today: more setup, slower feedbac (for later)
|
2. Setup
In the UI repo (tma-starter-app/ui):
docker exec -it tma_frontend npm testOptional:
docker exec -it tma_frontend npm run test:ui
docker exec -it tma_frontend npm run test:coverage3. Studio: Practice
| Category | What you’ll practice | Link |
|---|---|---|
| Unit tests | Date formatting utilities | DateUtils walkthrough |
| Component tests | Form interaction + mocking fetch | LoginPage walkthrough |
| Provider / hook tests | Context state + side effects | AuthContext walkthrough |
| Cheatsheet | Mocks + patterns reference | Testing cheatsheet |