菜单
Run Vitest tests for the Lessley React frontend. Use when: verifying component behavior, testing hooks, checking auth store logic, validating route guards, or running the test suite before committing.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | react-test |
| description | Run Vitest tests for the Lessley React frontend. Use when: verifying component behavior, testing hooks, checking auth store logic, validating route guards, or running the test suite before committing. |
| argument-hint | react-test to run the frontend test suite |
| user-invocable | true |
Run the Vitest test suite for the Lessley frontend.
# Watch mode (re-runs on file changes)
cd lessley-frontend && npm run test
# Single run (CI mode)
cd lessley-frontend && npm run test:run
@testing-library/jest-dom (DOM matchers like toBeInTheDocument)@testing-library/react + custom renderWithProviders wrapper@testing-library/user-eventPlace test files next to the code they test:
features/auth/store.ts → features/auth/store.test.ts
routes/ProtectedRoute.tsx → routes/ProtectedRoute.test.tsx
lib/query-keys.ts → lib/query-keys.test.ts
Use renderWithProviders from src/test/test-utils.tsx to wrap components with all necessary providers (QueryClient, Router):
import { renderWithProviders } from "@/test/test-utils"
it("renders the component", () => {
renderWithProviders(<MyComponent />)
expect(screen.getByText("Hello")).toBeInTheDocument()
})
Access and reset store state directly in tests:
import { useAuthStore } from "@/features/auth/store"
beforeEach(() => {
localStorage.clear()
useAuthStore.setState({ isAuthenticated: false, accessToken: null, ... })
})
Wrap in a QueryClientProvider with retry: false for predictable test behavior. The renderWithProviders helper does this automatically.
Build the Lessley React frontend for production. Use when: preparing a deployment, checking that TypeScript compiles, or verifying the production bundle before shipping.
Start the Vite dev server for the Lessley React frontend. Use when: developing UI features, testing visual changes, debugging frontend behavior, or verifying that components render correctly.
Guide for creating new features in the Lessley React frontend. Use when: adding a new page, feature module, or API integration following the established architecture patterns.
Run ESLint on the Lessley React frontend. Use when: checking code quality, enforcing consistent patterns, or before committing frontend changes.
Run TypeScript type checking on the Lessley React frontend without emitting output. Use when: checking for type errors, validating refactors, or debugging import issues.
Explains and enforces the layered architecture used in Lessley services. Use when: reviewing or writing controllers, services, or repositories; deciding where new logic should live; or ensuring a controller does not contain business logic.