问题标签 [react-test-renderer]

我 在我的反应网络应用程序中使用材料 UI 。我想用 jest 测试我的组件，以将样式保存在组件的快照中，就像jest-styled-component对 styled-component 所做的那样，但我不能。

您可以在代码和框中看到我的示例项目， 但这里是重要部分：我使用create-react-app使用以下命令创建我的项目：

这是我的 index.js 文件：

这是我在 src 文件夹中的 customTheme.js 文件：

这是我要测试的 App.js：

请注意，我正在用 JSS 覆盖样式，并且我有自己的主题。我想从组件中获取快照，使 css 成为快照的一部分，例如来自 github 中 material-UI 存储库的这个问题，或者像 jest-styled-component-do 对 styled-component 所做的那样。为了实现这个目标，我在 demo.test.js 中编写了这段代码：

但是通过这个测试，我的样式不在快照中，因此如果我在 App 组件中更改 mystyle，快照测试将不会失败。我已经阅读了以下资源，但无法得到我想要的： https ://github.com/mui-org/material-ui/issues/9492 https://github.com/mui-org/material-ui/issues /6834

感谢您的任何反馈

我在运行测试套件时面临随机测试失败，但“无法读取未定义的属性”除外

我猜它与某处发生的竞争条件有关，但据我所知，无论代码故障点在哪里，我都在这些方法前面等待。我在某处读到它可能是版本问题 "react-test-renderer": "^16.5.2"

以下是我正在使用的依赖项：

我期望测试与失败/成功一致。有人可以帮助了解出了什么问题吗？

我还没有找到任何证据表明任何人以前能够解决和解决这个问题。我有一个使用上下文的反应原生组件，我想渲染该组件。

但是当我开玩笑地运行测试文件时， jest text/__tests__/MyText.test.js

我收到以下错误

开玩笑是否适用于本机反应和上下文？世界上有没有人让这个工作？使用 jest v24.1.0，react-native 0.56，react-test-renderer 16.0.0

我有一个设置，我有一个使用 recompose 由多个 HOC 组成的主容器。

使用的 HOC 是：

WithPageWrapper、WithLoading、WithError

组成如下：

测试这个逻辑被证明是困难的。我正在做的项目是使用 react-test-renderer 并利用浅渲染方法。

因此，在测试快照以确保错误状态正在加载快照时，仅测试一层深度（由于浅渲染）并始终返回：

相反，我想在快照中看到的是：

正如我所期望的那样，加载 HOC 会简单地渲染主容器，因为加载道具是 null 或 false。

进行完整渲染而不是浅渲染只会使快照几乎不可读。有没有办法在 react-test-renderer 中使用浅渲染并测试多个 HOC 的组合？

我正在使用带有 Jest 的 React Test Renderer 来测试我的 React Native 应用程序。

这是我正在做的一个简单的代码示例：

第一个测试失败说：

第二个测试也失败了：

为什么使用findAllByPropsfind 双倍实例反应测试渲染器？

PS：作为健全性检查，我还尝试findByProps了哪些有效：

我正在使用react-test-rendererJest 来测试反应组件。但是，如果我像这样测试一个 react-mui 模态对话框：

但是，然后我得到一个错误：

错误：失败：“错误：未捕获'警告：已提供无效容器。这可能表明除了测试渲染器之外正在使用另一个渲染器。（例如，ReactTestRenderer 树内的 ReactDOM.createPortal。）这是不支持。%s'

我应该如何测试然后响应门户以使该测试正常工作？

因此，测试应该为函数提供输入并测试输出。使用 React，函数的输入可能来自其中一个props或子组件/函数。好的，还有其他方法，但现在让我们看看这两种方法。

我有一个容器组件，它执行一些业务逻辑并呈现一个孩子：

该 Container 为子项提供回调样式prop。目标是测试当孩子调用这个函数时，Container 用它做一些事情，然后调用它自己的回调样式 prop（也就是我们想要测试的输出）。

我遇到的问题是如何使用钩子触发在 Jest/React 中提供给孩子的这个函数？

这里的设置有点难以用语言解释，但我确实有一个 repo 和代码框：https: //github.com/Kikketer/hooks-test-questions https://codesandbox.io/embed/hooks-tests-问题-vvrv6

沙盒最适合查找，但我不知道如何在其中运行 jest，因此在克隆后尝试它是最容易的。

这里有几件事在起作用：

1. 我不能使用浅渲染器，因为我还需要验证useEffect钩子调用属性。
2. 我在 Container 函数中使用子组件的模拟渲染，这样它就不会尝试渲染子组件，因为我只是在测试 Container 我不需要担心该子组件的依赖关系或其他故障。只是我传递了有用和预期的道具。

我的测试如下所示：

我再次模拟视图，因为我不能使用浅渲染器并且我不想渲染孩子。我只想验证道具（快照做得很好）。

我是如何使用类做到这一点的

在钩子之前，我可以进入组件并直接调用一个函数：

我意识到创建一个new反应组件是不受欢迎的，但这将使我能够非常简单地运行这个测试。我不相信我能用 Hooks 做类似的格式，因为它是一个不暴露内部函数的函数。

所以我有一个显示一些文本字段的组件。一个输入，一个选择，基于用户在该选择上使用的输入，（选择的值）第三个是否显示。

我尝试使用 React-Test-Renderer 仅测试第一个输入字段，但出现以下错误：预期 1 但找到 2 个节点类型为：“未定义”的实例

这是输入字段代码：

这是我的测试代码：

如果您想知道 ContextBR.Provider 是什么，我们使用上下文而不是 redux。

我的错误消息：预期 1，但发现 2 个节点类型为：“未定义”的实例

我首先尝试了没有<ContextBr.Provider包装的广告，但这给了我 Dispatch 为空或未定义。这可能是因为我也没有发送上下文并且组件使用它。

我期待它找到输入，并断言它的值是否是我发送的值，“”。之后，我的目标是添加重复代码，而不是发送“”，而是发送“蓝色”（仅作为示例），然后对其进行断言。

我正在尝试测试用户体验。他可以在上面打字，而且它显示了他正在输入的内容。

我正在使用NumericInput，当我在我的设备上运行应用程序时它工作正常。

但是，当我运行时jest，会出现各种错误：

和

第一个问题：这正常吗？

第二个问题：如果是，我该如何模拟NumericInput？

按照本指南，我似乎需要这样做：

但它不起作用。我也试过：

没有成功。

o_0 这里发生了什么？

干杯!

屏幕测试.js

我要测试的组件

我的数据变量只是一堆静态数据。开玩笑说我收到了这个错误TypeError: Cannot read property 'getParam' of undefined，它指向这一行const data = this.props.navigation.getParam('details'); 我知道组件在我运行应用程序时工作，只是测试失败了。

我认为只需在我的 Screen-test.js 文件中为组件提供道具，它的工作原理是一样的，但我没有定义。我该如何测试呢？

我也像这样使用反应导航传递道具onPress={() => this.props.navigation.navigate('EngagementDetailModal', {details: this.props.data})