问题标签 [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 - 测试是否有defaultChecked时如何检查复选框?
这是我要实现的目标的演示:链接
问题是,我看到如果没有 defaultChecked 属性,我可以更改值并选中复选框,但它是遗留代码,我不能轻易将其取出,我需要该属性。
我需要: e.currentTarget.checked 在测试环境中实现,它是错误的。当我删除 defaultChecked false 时,它确实实现了,但我需要它。
我将react-testing-library 与 jest 一起使用。
以及来自这里的演示代码:
javascript - react-testing-library validateDOMNesting 错误
问题:
如何将我的TableBody
组件呈现为table
元素,而不是使用默认div
元素react-testing-library
?
补充资料:
我尝试将选项传递给react-testing-library
, render()
, 函数,但我似乎无法让它工作。
我还尝试在react-testing-library
测试中四处挖掘以查找示例,但没有找到任何东西。
您通常不需要指定选项,但如果您曾经这样做,这里有可用的选项,您可以将其作为第二个参数提供给渲染。
container:默认情况下,
react-testing-library
将创建一个div
并将其附加div
到document.body
,这是您的反应组件将被渲染的地方。如果您通过此选项提供自己的HTMLElement
容器,它将不会document.body
自动附加到。baseElement:如果
container
指定了 ,则默认为 that,否则默认为document.documentElement
。这用作查询的基本元素以及使用时打印的内容debug()
。
我使用 Jest 的测试代码:
javascript - 测试可反应加载的组件
我在测试React
使用react-loadable
. 比如说,我有一个Button
组件,根据它是否接收到一个icon
道具,它会像这样加载一个Icon
组件:
按钮.js
然而,当我测试这个组件时,Icon
还没有加载,而是测试只找到<div>Loading...</div>
元素......
Button.test.js
有没有一种优雅的方法可以在不使用实际setTimeout
s 的情况下处理这种情况?
reactjs - 无法使用 dom-testing-library 从作为其父标签的标签访问输入
当标签环绕输入时,我发现自己在尝试从标签访问输入时遇到了麻烦。这看起来是一个很容易解决的问题,但我玩得很开心。
我在想以下方法会起作用,但没有运气:
可以在这里找到一个带有几个测试的小示例片段:
reactjs - 将 react-testing-library 与 storyshots 一起使用?
是否可以将 react-testing-library 与 storybook storyshots 插件一起使用?我想为不使用酶的反应成分生成一些测试。
react-redux - Jest mocking - 模拟命名的出口,除了一个
我有一个 redux 文件,其中包含我的 reducer 和我通过命名导出的所有操作。
在我的测试文件中,我导入减速器和动作。我有一个 renderWithRedux,它接收减速器并在里面创建一个真实的商店。
我的问题是我正在渲染的组件是在连接组件的 mapDispatchToProps 中传递的操作。
我想在我的特定用例中模拟myAction这个动作实际上是一个重击,我想看看商店是否更新了。
我遇到的问题是如何模拟 myAction 而不是 reducer。我试过了
但是减速器仍然以某种方式被嘲笑。
这是可能的还是我只是流浪癖。
reactjs - fireEvent 未正确调用 react-testing-library 中的事件
我目前正在使用Jest和react-testing-library测试输入。我正在尝试测试 onChange 函数是否会在我的输入字段更改时触发。这是我的代码示例:
这是我运行此测试时在终端中得到的结果:
我已经在其他测试中使用了 fireEvent.click() 函数,但没有任何问题,但 fireEvent.change() 似乎对我不起作用。
reactjs - 鼠标悬停事件触发的测试样式
我有一个按钮,当鼠标移到它上面时会显示不同的样式:
这是我的测试:
但是,测试抱怨背景颜色是绿色而不是红色。fireEvent.mouseEnter
我在打电话之前试过了mouseOver
。没有任何区别。我错过了什么?
reactjs - 如何使用 react-testing-library 在容器内的元素上触发 Event.scroll?
我正在尝试模拟 div 中包含的元素的滚动,这是传递给render
函数的元素。
我正在尝试这样的事情,但似乎 div 没有滚动,因为我的下一个expect
正在下降。
这是触发滚动事件的正确方法吗?还有其他选择吗?
javascript - 当被测组件呈现嵌套连接组件时,React 测试失败,找不到嵌套组件
我正在使用带有 Typescript 和 Enzyme 的 create-react-app 项目(我也尝试过 react-testing-library 并遇到了同样的问题)
我是 React 测试的新手,并试图让基本测试正常工作。在这种情况下,我正在尝试测试呈现 Ping 组件的 App 组件。此错误仅在尝试渲染连接组件时发生,在尝试渲染无状态功能组件时不会发生。
当我尝试对我的 App 组件进行简单的渲染测试时,出现错误:
Cannot find module 'src/components/Ping' from 'index.tsx'
其中 index.tsx 是 App 组件。
应用程序.test.tsx
应用程序.tsx
当我尝试将 react-testing-library 与渲染功能一起使用时,也会发生此错误。