问题标签 [snapshot-testing]

我已经构建了一个 React 应用程序 (v16.13.1) 并正在使用 Jest (v25.1.0) 对其进行测试。当我运行npm test测试时，所有测试都通过了，但是当我运行npm test -- --coverage所有组件时，所有组件都返回undefined并且所有快照测试都失败了。

应用程序中的每个组件都会发生这种情况。表现出此行为的组件的典型示例是：

src/components/Card.js

src/components/Card.test.js

这些测试过去都可以通过，但现在它们失败了，但只有在coverage启用标志时才会失败。

我究竟做错了什么？

我有以下测试：

我收到以下错误：

我一直在寻找解决方案，发现：https ://github.com/mui-org/material-ui/issues/9243但仍然不知道如何解决这个问题。

我正在使用样式化组件和 jest+enzyme+jest-styled-components 来测试我的组件。我希望能够浅渲染组件并使用快照测试：

生成的快照是：

问题是样式不包括在内。我想要达到的是我的快照包括样式组件的实际 css。使用酶，mount我能够在快照中很好地看到 css：

但对我来说，只渲染浅层很重要，当我使用时，shallow我只看到没有 css 的组件（如上）。

也尝试过酶的dive方法，但没有成功。那么，有没有办法浅渲染一个样式化的组件并在快照中获取 css 呢？

如果问题听起来不完整，请道歉。我最近学习了 NgRx，并意识到与在 NgRx 的情况下断言相比，快照测试会让生活更轻松。但是，我不想从 Karma 迁移到 Jest（不想为这一部分更改项目的整个流程）。使用 Karma 测试 NgRx 的最佳方法是什么，快照测试的完成方式是什么？我在 npm 中看到了一些包，但是有什么来自 karma 的第一手资料吗？欢迎任何建议。

我已经成功地使用 Quasar 和 Vue 设置了 Jest，并且我的大部分测试都有效。由于以下错误消息，唯一失败的测试是这个

我已经在我的 jest 配置中添加了以下内容：

我还尝试了以下

但再次没有运气。有什么我可能会丢失的吗？

我试图创建一个带有特定文本的黄金测试来验证，但是当屏幕包含 RichText 时，组件没有正确呈现。有没有办法渲染这个？

同一屏幕上带有 Text 和 RichText 的图像 - RichText 难以辨认

提前致谢

到目前为止，在我正在处理的项目中，我通常对以这种方式加载异步数据的组件进行快照测试：

我发现它非常方便，因为它允许拥有包含组件不同状态（加载、错误、加载数据）的快照。

问题是我刚刚发现根本不推荐这种方法，并且 @testing-library/react 包的最新更新不允许我再以这种方式测试我的组件。

根据包的 eslint 规则，我将不得不像这样修改我的代码：

它可以工作，但生成的快照仅包含组件的初始状态（在本例中为“正在加载”）。

在这种情况下，您将如何有效地对异步加载数据的组件进行快照测试？

我对调用toDateString()和的组件进行了正常的 Jest 快照测试toTimeString()。

当我在本地运行时，测试全部通过，因为测试和我的组件都在我当前的时区 (EST) 中运行；但是，当我将测试签入 GitLab 时，快照在 EST 中运行，但组件调用协调世界时的方法，导致它失败。

有没有办法在 Jest 中模拟时区？或者有没有其他解决方案？

我在 Windows 上（不是我的选择）。

我有一个有 4 个目标的项目，因为它是一个白标应用程序，基本上大部分代码都是通用的，除了品牌（图像、颜色等）。

我正在尝试为每个设置 UI 快照测试，但我也想避免重复代码，所以我不希望每个品牌有 4 个不同的 UI 测试目标，有 4 个不同的 UI 文件夹。

我确实根据这篇文章在线找到了一个选项：https ://medium.com/@rijalab/how-to-use-one-test-target-files-for-two-app-targets-in-ios-37df53265a5

其中确实涉及创建单独的测试目标，但仍然为您的测试用例保留一个文件夹，您可以在其中添加目标之间的切换，例如：

当然，这在单元测试的情况下有效，但在 UI 快照测试的情况下，shapshots 将始终位于同一个文件夹中 ->> 因此，它们总是会失败，因为当您切换品牌时它们不匹配。

我的问题是：

• 我如何/在哪里可以覆盖此路径，并最终在 ReferenceImage 快照文件夹中首先分离品牌，所以... UITests/ReferenceImages/Brand1/ButtonSnapshot 等。
• 除了我找到的解决方案之外，还有更好的解决方案吗？

react-test-renderer's to JSON 函数返回 React 结构而不是纯 html 代码。

例如：

输出：

因此，如果我将代码从 Test1 更改为 Test2，快照测试就会失败。

但实际上它们在浏览器中生成相同的 html 结构。

我想知道是否有一种方法可以呈现纯 html 代码而不是反应结构。例如：

代码沙盒： https ://codesandbox.io/s/brave-curie-lnt6y?file=/ src/App.js:0-472