如何用Storybook与GitHub Actions在CI流水线配置测试运行（替代Git Hook）

核心思路 #

用CI/CD流水线在代码推送到main分支前（或PR阶段）执行增量/针对性测试，替代pre-push的全量测试，既保证代码质量，又提升效率。

具体实现步骤 #

1. 配置Storybook测试命令

确保项目中存在可单独执行Storybook交互测试的命令，在package.json中添加：

{
  "scripts": {
    "test-storybook": "test-storybook"
  }
}

该命令默认运行所有Storybook交互测试，后续可结合参数实现增量测试。

2. 配置CI/CD流水线（以GitHub Actions为例）

在项目根目录创建.github/workflows/storybook-tests.yml文件，设置流水线触发条件与执行步骤：

name: Storybook Interaction Tests
on:
  pull_request:
    branches: [ main ]
  push:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm install
      - run: npm run test-storybook

该配置会在针对main分支提交PR，或直接推代码到main分支时自动执行测试。

3. 实现增量测试（可选）

若要避免全量测试，可结合Git diff与test-storybook的--grep参数，仅运行变更文件关联的测试：

# 提取变更组件的名称
CHANGED_COMPONENTS=$(git diff --name-only HEAD~1 | grep -E '\.(stories|tsx|jsx)$' | awk -F/ '{print $NF}' | sed 's/\.(stories|tsx|jsx)$//' | uniq)

# 仅执行变更组件对应的测试
npm run test-storybook -- --grep "$CHANGED_COMPONENTS"

将这段逻辑替换流水线中npm run test-storybook的步骤，即可实现增量测试。

4. 禁用pre-push钩子

删除项目.git/hooks/pre-push文件，或移除package.json中相关钩子配置，停止本地全量测试触发。

关键优势 #

• 测试在云端执行，不占用本地开发资源
• 可灵活切换全量/增量测试模式
• 统一测试环境，避免本地差异导致的测试遗漏

内容的提问来源于stack exchange，提问作者Matheus Santos Araújo