以 Husky 钩子串联 ESLint、Prettier、Jest、Cypress、Storybook 构建全链路质量保障

方案简介

这是 safe-wallet-monorepo 中真实使用的质量保障技术配方：以 Husky pre-commit 钩子为入口，串联 ESLint 与 Prettier（代码规范与格式化）、type-check（类型检查）、Jest（单元测试）、Cypress（Web E2E 测试）以及 Storybook（Web 组件文档化开发），移动端另配 Maestro E2E 测试。该方案适合采用 monorepo 的多端前端团队，希望在代码推送前自动拦截规范、类型与测试问题，保证 web 与 mobile 双端的代码质量一致。

亮点与能力

• 提交前自动执行 linting、formatting 与 type-check
• ESLint 跨所有 workspace 运行
• Prettier 统一格式检查
• Jest 单元测试覆盖所有 workspace
• Cypress 支持 Web 应用的交互式与 headless E2E 测试
• Storybook 提供 Web 组件文档与开发环境
• 移动端使用 Maestro E2E 测试

实施步骤

1. 跨所有 workspace 运行 ESLint

bash
yarn lint

2. 运行 Prettier 检查格式

bash
yarn prettier

3. 运行类型检查

bash
yarn workspace @safe-global/web type-check
yarn workspace @safe-global/mobile type-check

4. 运行单元测试

bash
yarn test

5. 运行 E2E 测试（仅 web）

bash
yarn workspace @safe-global/web cypress:open # Interactive mode
yarn workspace @safe-global/web cypress:run # Headless mode

6. 运行 Storybook

bash
yarn workspace @safe-global/web storybook

7. 运行 web 测试

bash
yarn workspace @safe-global/web test

使用与配置要点

日常开发中，提交代码前应确保 type-check、lint、prettier 和测试全部通过再推送更改；提交信息遵循 semantic commit message guidelines。配置 Husky 后，pre-commit 钩子会在每次提交时自动执行 linting、formatting 与 type-checking，无需手动重复运行。

注意事项与常见问题

• E2E 测试仅支持 web 应用（mobile 使用 Maestro）
• Cypress 支持交互模式（cypress:open）与 headless 模式（cypress:run）两种运行方式
• 环境变量与平台特定工作流的详细说明分别在 Web App README 与 Mobile App README 中

优缺点

• ✓ 提交前自动拦截问题
• ✓ 单元与E2E测试覆盖双端
• ✕ E2E 测试仅支持 web

出处

本方案挖掘自开源项目 safe-global/safe-wallet-monorepo，方案内容与实施命令均来自其 README 原文。