问题标签 [react-test-renderer]

目标是控制其他应用程序，我已经从 redux 商店获取数据。但我想看看哪个组件使用 Redux 商店的哪个字段。让我举例说明：

目标应用

在这个例子中，我已经可以控制应用程序，但是我看不到哪些组件与 Redux 存储中的哪个字段相关。所以我只有在调度动作和更新商店时才能意识到这一点。

我可以从以下应用程序中访问一些数据吗？

我已经尝试使用 HOC 和装饰器，但我无法访问此类数据。现在玩react-test-renderer和嘲笑商店。

更新：

我react-test-rendered可以访问组件道具，包括来自connectHOC 的道具，但现在我还不知道如何从 DOM 树中获取对真实组件的引用。

例子

有任何想法吗？））

我正在尝试测试以下组件，该组件基于几个 React 培训站点上非常常见的“ProtectedRoute”HOC/包装器示例。基本概念是在<Route>级别包装受保护的组件，以便重定向未经身份验证的用户。

到目前为止，我已经使用react-test-rendererand编写了以下测试redux-mock-store：

这两个测试都运行良好，并按预期通过，但是我现在有兴趣测试以下真实世界场景：

用户当前已登录，authenticated=true在商店中。一段时间后，他们的 cookie 过期。对于我们的示例，假设我们定期使用服务器检查 auth 的状态，它会触发一些动作来触发，导致商店的新状态导致authenticated=false.

除非我从未遇到过示例，否则我相当确定redux-mock-store（即使它的字面意思是“模拟商店”）在您调用store.dispatch(myAction()). 我能够测试状态变化myAction.spec.js，但我仍然无法模拟接收更新状态/道具的 HOCgetDerivedStateFromProps

据我所知，我编写的测试涵盖了组件以authenticated=true/false初始状态加载并按预期工作的两种情况，但是当我查看覆盖结果时，getDerivedStateFromProps这些测试并未涵盖该功能。

我将如何编写一个测试来模拟authentication商店状态中布尔值的变化并断言组件（以前）Authenticated收到了变化，以确保我在测试中涵盖了这一点？getDerivedStateFromPropscomponentWillReceiveProps

我正在尝试使用 Jest、Expo、React Navigation 进行快照测试，而我的整个应用程序仅使用钩子。我希望最终将这些变成 e2e 测试，在其中 Jest 单击并快照测试所有内容，但我什至无法获得反应导航来渲染。我在博览会加载器之后的快照总是显示“null”。我遵循了附带的选项卡启动器中的基本示例，expo init但它概述了如何设置模拟的方式根本不适用于我的应用程序。我已经尝试了各种各样的东西，但没有任何效果。

应用程序.tsx

应用程序.test.tsx：

/navigation/AppNavigator.tsx：

我正在使用Jest和Enzyme进行 React 应用程序测试。

我的文件夹结构看起来像

• /src

  • /__测试__

    • /关卡组件

      • OuterComp.test.js

  • /成分

    • /关卡组件

      • OuterComp.js

    • /小部件

      • ChenDropdown.js

OuterComp.js

ChenDropdown.js

OuterComp.test.js

结果是测试可以通过

但失败了

wrapper.debug()输出：

我想知道为什么，什么时候可以直接使用它，什么时候必须在它周围加上绳子。

使用@testing-library/react，我正在尝试测试输入值是否是由fireEvent引起的。但是面临一个问题，它总是返回空白。由于该值由 redux 存储控制。

这是代码：

这是更改方法（我将 OnInput 属性用于 onChange 和复制粘贴功能）

父组件功能：

测试.js

真的需要帮助。

我正在尝试在我的 react 应用程序中实现 Jest，但是当我导入 react-test-renderer 时，我收到错误消息：TypeError: Cannot read property 'hasOwnProperty' of undefined

我的 App.test.jsx 文件中的唯一行是：

完整的错误文本是：

有什么建议么？

我@testing-library用来测试我的React项目，它Material-UI用作它的主要 UI 库。正如所@testing-library暗示的，它的主要理念是以与用户使用它的方式完全相同的方式测试应用程序。例如，单击“提交”按钮或编辑标签为“用户名”等的输入。测试库为我提供了一些辅助方法，例如getByText,getByLabel等...。

我的问题是，对于某些测试，例如表单的输入测试，我需要查询输入的值或更改它的当前值。我需要getByLabel查询我的标签并转到父组件以查询其中包含的输入。该库提供了一个closestDOM 查询助手，但在某些情况下没有用，就像我刚刚描述的那样。

以这种方式编写测试感觉很好，我的意思是从用户的角度编写测试。但问题是我过于依赖Material-UI. 也许在下一次升级中，输入及其对应的标签不是祖先节点的子节点，等等......。

有什么我做错了吗？还是它@testing-library提供的测试哲学的陷阱？

这是我的包堆栈：

我正在尝试适当地模拟一个简单的退出按钮组件的道具。该组件中唯一的firebase道具是来自名为withFirebase.

我的想法是，我可以在没有 HOC 的情况下导出功能组件并firebase直接模拟 prop 并将其传递给组件以进行快照测试。

但是，当我运行此测试时，我得到以下TypeError. 关于如何正确模拟此firebase道具以进行快照测试的任何想法？

我们曾经使用 reactDom.render 进行测试。我们在尝试测试功能组件时开始遇到问题。在这些情况下，测试会在处理所有挂钩之前继续进行。我开始寻找解决方案，我发现 react-testing-library 也实现了渲染功能。它似乎解决了这个问题。+ 在某些情况下使用 act()。

react-testing-library render() 的返回值是带有 html 容器的特殊对象，而不是 React 组件。在这种情况下，我们不能再使用 reactDom 测试工具，因为它们需要组件。

我对所有这些库有点困惑，并且不确定测试我们的应用程序的正确方法是什么。谁能详细说明这两个库之间的区别？什么时候使用行为？（我发现这篇文章建议不要在渲染中使用 act：react-test-renderer's create() vs. @testing-library/react's render()）

谢谢！

我当前的组件中有Collapse和RadioGroup组件。 绑定到状态in的组件的道具。Collapse当我想改变RadioGroupwith onChangeprop 的值时，我得到一个错误。因为组件in的 propCollapse等于 true，并且Collapse组件应该会出现。

此错误出现在测试模式下react-test-renderer

我的组件的一些行：

测试文件：

如您所见，错误发生在调用handleChange具有seperate值的函数之后。