【问题标题】：Storyshots doesn't work on local storybook-static folderStoryshots 不适用于本地 storybook-static 文件夹
【发布时间】：2022-09-25 06:48:23
【问题描述】：

问题总结

静态故事书返回的故事书快照测试空白截图尽管当我运行 npx http-server storybook-static 时它们在 localhost:8080 上看起来不错

技术栈和相关代码

Vue 3
维特
故事书
开玩笑
故事截图
傀儡师

我有组件及其各自的故事。 npm run storybook 工作得很好。我的storybook.spec.js 如下：

import { imageSnapshot } from \"@storybook/addon-storyshots-puppeteer\"

import initStoryshots from \"@storybook/addon-storyshots\"


initStoryshots({
    suite: \"Image storyshots\", 
    test: imageSnapshot(
        storybookUrl: \'file://absolute/path/to/my/storybook-static\'
    )
})

我跑了以下。仅供参考，运行npm run build-storybook 后，我没有修改storybook-static 中的任何文件。

npm run build-storybook
npm run test

npm run test 构成 jest --config=jest.config.js test

问题

不幸的是，我得到的截图都是空白的，并且没有通过快照测试。

我怀疑这可能是由于 CORS 错误，就像其他 Storybook 用户在运行 npm run build-storybook 后单击 <project-root>/storybook-static/index.html 时一样，我也想寻求解决方案，因为我想在无头服务器上远程运行测试。

笔记

我使用绝对路径是因为相对路径在测试过程中导致资源未找到错误。

标签： html storybook jest-puppeteer storybook-addon storyshots

【解决方案1】：

问题是您正在从file:// 而不是http:// 运行测试。所以URI 是file:// 并且在应用一些url 逻辑之后，img url 最终是这样的：path.resolve(window.location, '/your-image.png')file:///your-image.png。如果是这种情况，您可以更改为http://。您可以启动一个快速服务器并从setupGlobal 提供storybook-static 文件夹，然后在teardownGlobal 中将其关闭。然后您需要将您的storybookUrl 更改为http://localhost:<some-port>。

【讨论】：