问题标签 [react-testing-library]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 使用 Redux 和 react-testing-library 测试 React 组件
我是在 React 中测试 redux 连接组件并试图弄清楚如何测试它们的新手。
目前我正在使用 react-testing-library 并且无法设置我的 renderWithRedux 函数以正确设置 redux。
这是一个示例组件：
这是一个示例测试：
用户属性值始终未定义。我已经用几种方法重写了这个，但似乎无法让它工作。如果我在测试中直接将用户数据作为道具传递给 Sample 组件，它仍然解析为未定义。
我正在通过官方文档从教程和示例中学习，例如：https : //github.com/kentcdodds/react-testing-library/blob/master/examples/tests/react-redux.js
任何指针、提示或解决方案将不胜感激！
javascript - 使用 React 测试库在 React 中断言表单提交的 prop 调用
您可以在以下代码框中重现该问题：
作为示例，我制作了一个组件，该组件使用以下代码在每次单击表单按钮时获取随机图像：
这按预期工作，我制作了以下代码来测试实现：
但是，测试失败并显示以下错误消息：
关于为什么失败的任何想法？
reactjs - 开玩笑模拟反应上下文
我需要一些帮助来了解如何使用React Context.
这是我的示例设置。
上下文.js
应用程序.js
我的组件.js
这是一个简化的例子。App想象一下和之间有更多层MyComponent，因此使用React Context.
这是我的测试文件MyComponent。
MyComponent.test.js
问题是，AppContext.Consumer是实现的一部分MyComponent，所以在这个测试中我没有直接访问它的权限。我如何模拟AppContext.Consumer，以便我实际上能够验证单击按钮会触发函数调用？
我知道理论上我可以通过MyComponent在 my中渲染来测试它App，但我只想编写一个单元测试MyComponent。
reactjs - 如何在移动维度上测试 React 应用程序？
我正在构建一个 React 应用程序，并使用 Cypress 和 React 测试库对其进行测试。
我想知道：如何“在移动设备上”测试应用程序。这意味着如果窗口大小低于断点，我该如何为运行的应用程序编写测试？我在相应的软件包文档中找不到任何相关信息。
regex - 正则表达式查找 React 测试库的名字标签（包括空格）
我正在使用 React 测试库进行 TDD。您可以使用正则表达式在您的 dom 中找到带标签的输入，如下所示：
我的问题是，在我的 UI 中有带有空格的标签，例如“名字”或“出生地”。如何使用正则表达式找到这些？
reactjs - 如何为响应中的搜索编写单元测试用例
我有一个组件，它有一个输入框，就像->
在这个组件中，现在我有来自 reducer 的作业数据。
现在，在这里我想使用单元测试用例来测试这个组件的搜索功能。我正在使用jest. 现在，任何人都可以帮我解决这个问题吗？任何提示都会非常有帮助。谢谢。
reactjs - fireEvent.click() 之后的笑话测试结果（没有酶）
我无法弄清楚为什么在单击此测试框架的按钮后渲染状态没有改变。它适用于应用程序，但不适用于测试用例。我尝试阅读多个文档并使用async/await waitForElement,moch renders和多个 getBy* 组合......似乎没有任何效果。
我在沙盒上复制了代码-> https://codesandbox.io/s/40pz9nj469
这是我要开始工作的代码块（位于./src/controls/Controls.spec.js）：
失败消息...
有人告诉我我们不允许使用酶，所以这里不能选择安装/浅...
有人有任何想法来完成这项工作吗？
reactjs - 如何在反应测试库中测试由 onChange 处理程序更新的道具？
我在输入上有一个 onChange 处理程序，我正在尝试根据我在 Dom 测试库文档here和here中阅读的内容进行测试。
我的代码中的一个区别是，我使用的是道具，而不是使用本地状态来控制输入值。所以 onChange 函数实际上是在调用另一个函数（也是通过 props 接收的），它将已经“提升”到另一个组件的状态更新。最终，输入的值作为 prop 被组件接收并更新输入值。
我在嘲笑道具并尝试做一些简单的测试来证明 onChange 处理程序按预期工作。
我希望在更改处理程序中调用的函数被调用的次数与测试中使用 fireEvent.change 的次数相同，这适用于：
我希望从原始模拟道具设置中读取 input.value ，这适用于：
但是，我在做一些愚蠢的事情（似乎根本不理解模拟函数），我无法弄清楚为什么下面的块不更新 input.value，并继续从原始的模拟道具设置。
这失败了，期待“”/收到“培根”<=在原始道具中设置
问题：如何编写测试来证明 input.value 已根据以下代码更改？我假设我需要模拟handleInstantSearchInputChange函数来做某事，但我真的不知道我在这里做什么。
感谢您提供有关如何做和/或更好地理解这一点的任何建议。
测试文件
零件
javascript - 如何使用 react-testing-library 在自定义组件上触发 onChange 事件？
我正在使用这个组件：
那么，使用 react-testing-library 如何获取此组件并触发onChange事件？我试图找到一些类似getByComponentName或类似的功能，但没有成功。
reactjs - 为什么 jest 模拟函数没有在我的测试中使用反应测试库执行？
问题
我创建了一个非常基本的代码示例以进行更好的说明。这是我要测试的代码（包含简单的反应钩子）：
我想测试传入的handleSubmit道具是否会被执行。所以我设置了这个测试：
它与反应钩子有关吗？我也尝试重新渲染它，但结果相同。我不知道为什么这不会通过。错误信息是：
预期的模拟函数已被调用，但未被调用。
如果你想玩它，这里是一个代码框：
https://codesandbox.io/s/ypok50n709
（TodoHeader.js和TodoHeader.test.js）