Exercise: component + boundary tests (Vitest)

Goal

Write tests that build confidence without being brittle.

Part A — Pure function unit tests

Create a small utility (or use one from earlier exercises) and test:

• happy path
• edge cases
• error cases (if applicable)

Acceptance criteria:

• tests are deterministic
• meaningful assertions (not “just renders”)

Part B — Component test (boundary mocked)

Test a component that:

• shows loading state
• shows error state
• shows data state

Mock the boundary (e.g. a data hook or tRPC caller) so the test doesn’t depend on network.

Acceptance criteria:

• tests assert what the user sees/does
• no reliance on internal component implementation details

Part C — Procedure/service test (integration layer mocked)

Test a server-side function (e.g. a tRPC procedure handler or a service function) where:

• Zod validation blocks invalid input
• the “integration layer” is mocked (microservice/data layer)

Acceptance criteria:

• invalid input never calls the integration mock
• errors are mapped consistently