Menu
Write and maintain tests with Vitest v4 dual configuration, mock utilities, and Zustand store testing patterns.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | testing |
| description | Write and maintain tests with Vitest v4 dual configuration, mock utilities, and Zustand store testing patterns. |
Write reliable tests with Vitest v4 dual configuration.
| Action | Rule |
|---|---|
| Choose test type | test-unit-vs-integration.md |
| Mock modules | test-mock-patterns.md |
| Test stores | test-zustand-stores.md |
| Mock Connect APIs | mock-transport.md |
| Skip UI rendering tests | no-ui-rendering-tests.md |
bun run test # All tests (CI default)
bun run test:ci # Sequential for CI
bun run test:unit # Unit tests only
bun run test:integration # Integration tests only
bun run test:ui # Interactive UI
bun run test:watch # Watch mode
bun run test:coverage # Coverage report
.test.ts = unit (Node.js), .test.tsx = integration (JSDOM)test-utils/test-utils.tsx for React component testsWhen implementing interactive features (buttons, forms, etc.):
.test.ts or .test.tsx filesNOT for: Multi-page user workflows → use e2e-tester
See rules/ directory for detailed guidance.
Client-side React performance optimization patterns.
Connect Query patterns for API calls. Use when working with mutations, queries, or data fetching.
TypeScript, React, and JavaScript best practices enforced by Ultracite/Biome.
Write and run Playwright E2E tests for Redpanda Console using testcontainers. Analyzes test failures, adds missing testids, and improves test stability. Use when user requests E2E tests, Playwright tests, integration tests, test failures, missing testids, or mentions 'test workflow', 'browser testing', 'end-to-end', or 'testcontainers'.
Refactor legacy forms to use modern Redpanda UI Registry Field components with react-hook-form and Zod validation. Use when user requests: (1) Form refactoring or modernization, (2) Converting Chakra UI or @redpanda-data/ui forms, (3) Updating forms to use Field components, (4) Migrating from legacy form patterns, (5) Implementing forms with react-hook-form and Zod validation.
Manage client and server state with Zustand stores and React Query patterns.