From zenbu-powers
當在 React IT Gherkin 中撰寫資料讀取步驟(render component, waitFor data)時, 「只能」使用此指令。Component render 觸發 API fetch,MSW 攔截並返回 mock data。
npx claudepluginhub zenbuapps/zenbu-powers --plugin zenbu-powersThis skill uses the workspace's default tool permissions.
When 語句執行**讀取操作**(Query)。
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Guides code writing, review, and refactoring with Karpathy-inspired rules to avoid overcomplication, ensure simplicity, surgical changes, and verifiable success criteria.
Share bugs, ideas, or general feedback.
When 語句執行讀取操作(Query)。
識別規則:
通用判斷:如果 When 是讀取操作且需要 Component render + 資料載入供 Then 驗證,就使用此 Handler。
Render React Component → Component 觸發 API fetch → MSW 攔截並回傳 mock data → 等待載入完成。
| Query | Command | |
|---|---|---|
| 觸發方式 | Component render (renderWithProviders) | user-event interaction |
| 系統狀態 | 不修改(GET request) | 修改(POST/PUT/DELETE) |
| Then 搭配 | readmodel-then(驗證顯示內容) | success-failure / aggregate-then |
renderWithProviders() render 目標 ComponentwaitFor 等待資料載入完成(loading indicator 消失 or 目標內容出現)When 用戶 "Alice" 查詢課程 1 的進度
import { screen, waitFor } from '@testing-library/react';
import { renderWithProviders } from '@/test/helpers/render';
import LessonProgressPage from '@/app/lessons/[id]/progress/page';
renderWithProviders(<LessonProgressPage params={{ id: '1' }} />);
// 等待資料載入完成
await waitFor(() => {
expect(screen.queryByText(/loading|載入中/i)).not.toBeInTheDocument();
});
When 用戶 "Alice" 查詢購物車中的所有商品
import CartPage from '@/app/cart/page';
renderWithProviders(<CartPage />);
await waitFor(() => {
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
});
When 用戶 "Alice" 查詢第 1 章的所有課程
import ChapterLessonsPage from '@/app/chapters/[id]/lessons/page';
renderWithProviders(<ChapterLessonsPage params={{ id: '1' }} />);
await waitFor(() => {
expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
});
When 用戶 "Alice" 進入課程 1 的頁面
// 如果 Component 已在畫面上,使用 user-event 點擊導航
const user = createUser();
await user.click(screen.getByRole('link', { name: /課程 1/i }));
await waitFor(() => {
expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
});
await waitFor(() => {
expect(screen.queryByText(/loading|載入中/i)).not.toBeInTheDocument();
});
await screen.findByRole('heading', { name: /課程進度/i });
await waitFor(() => {
expect(screen.queryByTestId('skeleton')).not.toBeInTheDocument();
});
優先使用策略 2(findBy 語意最清晰),策略 1 為通用備選。
waitFor 或 findBy*