Storybook+Loki在CI环境运行截图测试时出现资源加载失败问题

算力阿峰

2026-7-20

解决Storybook 7.x + Loki 0.31.x在CI环境的资源加载失败问题

问题背景

React项目使用Storybook ^7.0.12和Loki 0.31.2做UI组件截图测试，本地dev模式正常，但CI环境下构建Storybook后执行npx loki --requireReference --reactUri file: ./storybook-static时，出现8个资源加载失败（涉及字体、bundle.js），部分测试无法运行，Docker运行也未解决，推测是版本冲突导致。

解决方案

1. 升级Loki到支持Storybook 7的版本

Loki 0.31.x对Storybook 7的构建输出结构兼容性不足，0.32.0及以上版本正式支持Storybook 7。直接升级：

npm install loki@^0.32.0 --save-dev
# 或 yarn add loki@^0.32.0 --dev

升级后记得重新生成基准截图：

npx loki capture

2. 调整Loki配置适配CI环境

在项目根目录的.lokirc.js中添加/修改以下配置，确保资源路径正确解析：

module.exports = {
  target: 'chrome.docker', // CI环境优先用docker目标，避免本地环境差异
  reactUri: 'file:./storybook-static',
  server: {
    port: 6006,
  },
  chromeFlags: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-dev-shm-usage' // 解决CI环境内存不足问题
  ],
};

3. 校验Storybook构建配置

在.storybook/main.js中确认静态资源和构建输出配置正确：

module.exports = {
  core: {
    builder: '@storybook/builder-webpack5', // Storybook 7默认使用webpack5，确保启用
  },
  staticDirs: ['../public'], // 若有自定义静态资源（如字体），需配置此处
  outputDir: 'storybook-static',
};

构建后检查storybook-static目录，确认字体、bundle.js等资源是否存在且路径正确。

4. CI环境的额外优化

运行Loki时添加--verbose参数，查看详细的资源加载日志，定位具体错误路径：
```
npx loki test --requireReference --verbose
```
若使用Docker，确保镜像包含完整的Chrome依赖和系统字体（可选用官方的storybook-chrome镜像或自行安装字体包）。