问题标签 [storyshots]

我正在尝试使用门户呈现模式，它在我的应用程序以及 Storybook 中都可以正常工作，但是一旦将其添加到 Storyshots 中，我就会遇到问题。

第一个问题是模拟 ReactDOM 的 createPortal API。我是这样做的：

ReactDOM.createPortal = element => element;

如果不添加，我会收到以下错误：

错误：未捕获 [TypeError：parentInstance.children.indexOf 不是函数]

我找到了这个解决方案React Portal Error。

这解决了这个问题，但是当组件使用门户时，它会在尝试附加子项时失败。它没有找到“modal-root”组件，因此无法附加元素。我不知道如何克服这一点。

我的门户看起来与 React 网站上的示例几乎相同：

它现在失败并出现此错误：

错误：未捕获 [TypeError：无法读取属性 'appendChild' of null]

上面代码片段中指示的位置。

复制克隆https://github.com/adamchenwei/vuejs-playground/tree/step/3-3-2-B-storybook-storyshot-broken checkout step/3-3-2-B-storybook-storyshot-broken npm run test

查看错误Cannot find module '@storybook/vue/dist/server/babel_config' from 'config-loader.js'

我哪里做错了？我怀疑 babel 中有什么东西，但我不确定是什么。

https://github.com/storybooks/storybook/issues/4793 更多详细信息在该票中。粘贴在这里以了解此时的情况：

描述错误 Massive 无法解决 'fs' 在 jest 已经配置并且故事书正确运行后提出了故事镜头配置。

重现行为的重现 步骤：

预期的行为 故事不应导致错误阻止故事书正确运行

截图

代码片段 如果适用，请添加代码示例以帮助解释您的问题。

系统： - 操作系统：MacOS - 设备：Macbook Pro - 浏览器：NA - 框架：Vue - 插件： "@storybook/addon-storyshots": "^4.0.6", "@storybook/vue": "^4.0.6",

附加信息：

我尝试添加node: { fs: 'empty' },到故事书的配置中，它只会导致“fs”未找到之外的其他错误。所以没有真正解决问题。

任何指针将不胜感激。

我正在使用结合故事书和故事镜头的反应材料 ui。我试图了解如何通过故事书通过笑话或故事镜头来测试 Material-ui 中的响应元素

我的Hidden组件中有如下元素

和看起来大致相似的故事

我已经尝试在我的主题中修改断点，这在通过故事书查看时会产生效果。但是，无论我尝试了什么，该Hidden元素都不会在我的快照中呈现。

我也尝试过不使用该Hidden元素并尝试className设置样式display: none是否theme.breakpoints.down('xs')为真。这会在我的快照中生成元素，例如

但是此块中的任何内容都没有告诉我该元素被隐藏在xs屏幕上。

似乎我应该能够以某种方式在故事书中切换xsDown元素Hidden为真或假，以便在我的快照中渲染或不渲染该元素，但我没有运气弄清楚这一点。

我想总的来说，我只是想知道大多数人是如何用玩笑来测试响应式 UI 的。似乎我应该能够通过快照来完成此任务，但也许我遗漏了一些东西。

谢谢你的帮助

在我想使用自定义浏览器进行故事拍摄时遇到问题，但我很难找到有关管理浏览器生命周期的任何示例或文档 - 它只是随便提到的。我的 initStoryshots 看起来像这样

所以我不清楚我可以在哪里添加 afterAll 或其他方式来获取浏览器和.close()它？

希望在这里找到一些指导。请让我知道我可以添加哪些细节。

如何为所有可能的旋钮选项生成快照？现在，带有 storyshots 和 jest 的 storybook 只能为默认组件状态制作屏幕截图，这并不涵盖所有可能的变体。

我知道有一种可能的方法是为所有旋钮选项创建故事，但这首先破坏了使用旋钮的目的。

有没有办法做到这一点？

最初在github的评论中提到：https ://github.com/storybookjs/storybook/issues/4103#issuecomment-426217161

我正在运行一个 Angular v8 应用程序并在故事书中。我想为其集成自动化视觉测试并找到 StoryShots。我找到了这条指令并像那样实现了它。因为 Karma 是应用程序中的测试工具，所以我调整了仅包含“test.ts”的文件应进行视觉测试的开玩笑配置。Jest 找到了 spec.ts 文件，但只有 test.ts 文件，它找不到 test No tests found, exiting with code 1。我错过了什么？有人对角度和 StoryShots 有一些经验吗？

这是我的代码：

package.json

jest.config.js

jest.setup.js

在根文件夹中，我有一个.storybook包含测试文件的文件夹

storyshots.test.ts

运行 jest 测试时，错误如下。

当我想为 react-native-web 项目的故事书进行故事测试时会发生这种情况。该项目是打字稿项目。单元测试的案例很简单，

项目的 package.json 如下。

项目的 babelrc 如下。

这个问题困扰了我很久，谁能帮帮我。非常感谢！

我想renderOnly为我的 Storyshots 测试使用模式，但我在某些故事中遇到了错误。

我可以通过添加来修复这些错误

但现在我输了renderOnly。

我在 Jest 测试中遇到错误：

我没有requireActual在我的代码中使用任何地方。不过，它看起来像Storybook。

谷歌搜索只出现了一个（自删除后）没有答案的 Stackoverflow 问题。