Storybook测试运行器：自动化测试的终极指南

Storybook测试运行器：自动化测试的终极指南

storybook 项目地址: https://gitcode.com/gh_mirrors/sto/storybook

什么是Storybook测试运行器

Storybook测试运行器是一个革命性的工具，它能够将你的所有Storybook故事转化为可执行的测试用例。这个强大的工具基于Jest测试框架和Playwright浏览器自动化工具构建，为前端组件测试提供了全新的解决方案。

核心功能

1. 基础渲染测试：对于没有play函数的故事，测试运行器会验证组件是否能正常渲染而不抛出错误
2. 交互测试：对于包含play函数的故事，除了验证渲染外，还会检查play函数中的错误和断言

环境配置详解

安装步骤

首先需要安装测试运行器作为开发依赖：

npm install @storybook/test-runner -D

配置package.json

在package.json中添加测试脚本：

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

运行准备

测试运行器需要Storybook实例才能工作，可以是本地运行的实例，也可以是已发布的Storybook。启动本地Storybook：

npm run storybook

然后在另一个终端窗口运行测试：

npm run test-storybook

高级配置选项

配置文件生成

运行以下命令可以生成自定义配置文件：

test-storybook --eject

这会生成test-runner-jest.config.js文件，你可以修改它以进行更精细的控制。

常用CLI选项

| 选项 | 描述 | 示例 | |------|------|------| | --watch | 监视模式运行 | test-storybook --watch | | --coverage | 生成覆盖率报告 | test-storybook --coverage | | --browsers | 指定测试浏览器 | test-storybook --browsers firefox chromium | | --maxWorkers | 设置最大工作线程数 | test-storybook --maxWorkers=2 | | --url | 指定Storybook URL | test-storybook --url http://your-storybook.com |

CI集成方案

方案一：针对已部署的Storybook

name: Test Runner
on: deployment_status
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npm run test-storybook -- --url ${{ github.event.deployment_status.target_url }}

方案二：本地构建测试

name: Test Runner
on: push
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npm run build-storybook
      - run: npx http-server storybook-static -p 6006 & npx wait-on http://localhost:6006
      - run: npm run test-storybook

高级测试技巧

测试钩子API

测试运行器提供了强大的生命周期钩子：

module.exports = {
  async postVisit(page, context) {
    // 在每个故事渲染后执行
    const element = await page.$('#storybook-root');
    const html = await element.innerHTML();
    expect(html).toMatchSnapshot();
  }
};

基于标签的测试过滤

可以通过标签来筛选要测试的故事：

// .storybook/test-runner.js
module.exports = {
  tags: {
    exclude: ['no-tests'],
    include: ['visual']
  }
};

最佳实践建议

1. 优先使用play函数：尽可能在play函数中完成测试逻辑
2. 合理使用标签：通过标签系统组织测试范围
3. 结合CI使用：将测试运行器集成到持续集成流程中
4. 适度使用钩子：只在必要时使用测试钩子API

Storybook测试运行器为组件测试提供了全新的可能性，通过合理配置和使用，可以显著提升前端项目的测试覆盖率和质量保证能力。

storybook 项目地址: https://gitcode.com/gh_mirrors/sto/storybook