故事截图不适用于本地故事书-静态文件夹
问题摘要
在静态故事书上进行故事簿快照测试，返回空白屏幕截图，尽管在运行npx http-server storybook-static时它们在localhost:8080上看起来很好
技术栈和相关代码
3
- Vite
- Storybook
- Jest
- Storyshots
- Puppeteer
- Vue
我有他们各自的故事。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之后，我没有修改故事书中的任何文件-静态文件。
npm run build-storybook
npm run testnpm run test构成jest --config=jest.config.js test
问题
不幸的是，我得到的截图都是空白的，无法通过快照测试。
我怀疑这可能是由于CORS错误造成的，就像其他童话用户在运行<project-root>/storybook-static/index.html之后单击npm run build-storybook一样，我也想向其请求解决方案，因为我想在无头服务器上远程运行测试。
备注
我使用绝对路径，因为相对路径在测试过程中导致资源找不到错误。
回答 2
Stack Overflow用户
发布于 2022-09-24 22:48:08
问题是，您是从file://而不是http://运行测试的。因此，URI是file://，在应用了一些url逻辑之后，img url就这样结束了：path.resolve(window.location, '/your-image.png') file:///your-image.png。如果是这样的话，您可以更改为http://。您可以启动一个快速服务器，并从storybook-static中为setupGlobal文件夹提供服务，然后在teardownGlobal中关闭它。然后，您需要将storybookUrl更改为http://localhost:<some-port>。
Stack Overflow用户
发布于 2022-10-31 16:07:20
没有一个映像是在我的管道中加载的，但是在本地工作得很好，这是因为组件使用一个相对路径<img src="/my-image" /> (显然不允许使用 file protocol)获取图像。
最后我做了两件事：
- 通过更新故事书
中的main.js文件来更新静态目录以使用根目录。
module.exports = {
staticDirs: [{ from: '../static', to: '/' }],
}- 添加了一个脚本，以从故事书
中删除预览-Head.html文件中的前斜杠。
<script>
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.querySelectorAll('img')).forEach((img) => {
const original = img.getAttribute('src');
img.setAttribute('src', original.replace('/', ''));
});
});
</script>另一种(可以说更好的)方法是通过服务器运行测试，在那里您可以访问映像。
https://stackoverflow.com/questions/72627681
复制相似问题
腾讯云开发者
