配置Visual Storyshots对接Storybook静态构建路径遇阻求助

我之前也踩过类似的路径坑，给你分享几个靠谱的解决思路：

首先先确认基础：执行npm run build storybook后，静态文件默认会输出到项目根目录的storybook-static文件夹里，先打开这个文件夹下的index.html，确保能在浏览器正常打开，验证构建是完整有效的。

接下来是关键的storybookUrl配置——绝对不要直接写相对路径（比如./storybook-static），因为测试运行时的工作目录可能和你预期的不一样，很容易出现找不到资源的情况。推荐用Node的path模块生成绝对路径，再搭配file://协议访问本地静态文件，这种方式兼容性拉满。

完整配置示例 #

假设你的Storyshots.test.js放在src/tests目录下，静态Storybook文件夹在项目根目录，配置代码如下：

import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';

initStoryshots({
  suite: 'Visual Storyshots',
  test: imageSnapshot({
    // 用path.resolve生成绝对路径，再拼接file://协议
    storybookUrl: `file://${path.resolve(__dirname, '../../storybook-static')}`,
  }),
});

这里的__dirname代表当前Storyshots.test.js文件所在的目录，../../storybook-static是相对于这个文件的路径，path.resolve会自动把它转换成系统能识别的绝对路径，加上file://就能让Puppeteer正确加载本地静态资源。

常见坑点排查 #

• Windows系统不用手动转义路径分隔符，path.resolve会自动处理成符合系统要求的格式
• 可以用console.log(path.resolve(__dirname, '../../storybook-static'))打印最终路径，确认指向的是正确的静态文件夹
• 如果静态资源加载失败，重新执行npm run build storybook，查看构建日志有没有报错，确保静态文件没有遗漏

内容的提问来源于stack exchange，提问作者Amico