studio-testing by supabase/supabase
npx skills add https://github.com/supabase/supabase --skill studio-testing如何为 apps/studio/ 编写和组织测试。核心原则:将逻辑从 React 组件中提取出来,放入纯工具函数中,然后对这些函数进行详尽的测试。仅对复杂的 UI 交互使用组件测试。对自托管版本和平台版本共享的功能使用端到端测试。
在以下情况下参考这些指南:
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 逻辑提取 | 关键 | testing- |
| 2 | 测试覆盖率 | 关键 | testing- |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 3 |
| 组件测试 |
| 高 |
testing- |
| 4 | 端到端测试 | 高 | testing- |
testing-extract-logic - 将逻辑从组件中移除,放入 .utils.ts 文件中作为纯函数:参数输入,结果输出testing-exhaustive-permutations - 测试工具函数的每一种排列组合:正常路径、错误输入、空值、边界情况testing-component-tests-ui-only - 仅为复杂的 UI 交互逻辑编写组件测试,而非业务逻辑testing-e2e-shared-features - 为自托管版本和平台版本共用的功能编写端到端测试;覆盖点击和键盘快捷键Is the logic a pure transformation (parse, format, validate, compute)?
YES -> Extract to .utils.ts, write unit test with vitest
NO -> Does the feature involve complex UI interactions?
YES -> Is it used in both self-hosted and platform?
YES -> Write E2E test in e2e/studio/features/
NO -> Write component test with customRender
NO -> Can you extract the logic to make it pure?
YES -> Do that, then unit test it
NO -> Write a component test
阅读单独的规则文件以获取详细解释和代码示例:
rules/testing-extract-logic.md
rules/testing-exhaustive-permutations.md
每个规则文件包含:
获取包含所有扩展规则的完整指南:AGENTS.md
| 内容 | 位置 |
|---|---|
| 工具函数测试示例 | tests/components/Grid/Grid.utils.test.ts, tests/components/Billing/TaxID.utils.test.ts, tests/components/Editor/SpreadsheetImport.utils.test.ts |
| 组件测试示例 | tests/features/logs/LogsFilterPopover.test.tsx, tests/components/CopyButton.test.tsx |
| 端到端测试示例 | e2e/studio/features/filter-bar.spec.ts |
| 端到端测试助手模式 | e2e/studio/utils/filter-bar-helpers.ts |
| 自定义渲染 | tests/lib/custom-render.tsx |
| MSW 模拟设置 | tests/lib/msw.ts (addAPIMock) |
| 测试 README | tests/README.md |
| Vitest 配置 | vitest.config.ts |
| 相关技能 | e2e-studio-tests (运行端到端测试), vitest (API 参考), vercel-composition-patterns (组件架构) |
每周安装数
93
代码仓库
GitHub 星标数
99.7K
首次出现
2026年2月21日
安全审计
安装于
github-copilot91
gemini-cli90
kimi-cli90
cursor90
amp90
opencode90
How to write and structure tests for apps/studio/. The core principle: push logic out of React components into pure utility functions, then test those functions exhaustively. Only use component tests for complex UI interactions. Use E2E tests for features shared between self-hosted and platform.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Logic Extraction | CRITICAL | testing- |
| 2 | Test Coverage | CRITICAL | testing- |
| 3 | Component Tests | HIGH | testing- |
| 4 | E2E Tests | HIGH | testing- |
testing-extract-logic - Remove logic from components into .utils.ts files as pure functions: args in, return outtesting-exhaustive-permutations - Test every permutation of utility functions: happy path, malformed input, empty values, edge casestesting-component-tests-ui-only - Only write component tests for complex UI interaction logic, not business logictesting-e2e-shared-features - Write E2E tests for features used in both self-hosted and platform; cover clicks AND keyboard shortcutsIs the logic a pure transformation (parse, format, validate, compute)?
YES -> Extract to .utils.ts, write unit test with vitest
NO -> Does the feature involve complex UI interactions?
YES -> Is it used in both self-hosted and platform?
YES -> Write E2E test in e2e/studio/features/
NO -> Write component test with customRender
NO -> Can you extract the logic to make it pure?
YES -> Do that, then unit test it
NO -> Write a component test
Read individual rule files for detailed explanations and code examples:
rules/testing-extract-logic.md
rules/testing-exhaustive-permutations.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md
| What | Where |
|---|---|
| Util test examples | tests/components/Grid/Grid.utils.test.ts, tests/components/Billing/TaxID.utils.test.ts, tests/components/Editor/SpreadsheetImport.utils.test.ts |
| Component test examples | tests/features/logs/LogsFilterPopover.test.tsx, tests/components/CopyButton.test.tsx |
| E2E test example | e2e/studio/features/filter-bar.spec.ts |
| E2E helpers pattern |
Weekly Installs
93
Repository
GitHub Stars
99.7K
First Seen
Feb 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot91
gemini-cli90
kimi-cli90
cursor90
amp90
opencode90
Azure 升级评估与自动化工具 - 轻松迁移 Functions 计划、托管层级和 SKU
96,200 周安装
e2e/studio/utils/filter-bar-helpers.ts| Custom render | tests/lib/custom-render.tsx |
| MSW mock setup | tests/lib/msw.ts (addAPIMock) |
| Test README | tests/README.md |
| Vitest config | vitest.config.ts |
| Related skills | e2e-studio-tests (running E2E), vitest (API reference), vercel-composition-patterns (component architecture) |