模拟按钮点击似乎是一个非常简单/标准的操作。然而,我不能让它在Jest.js测试中工作。
这就是我尝试的(也是使用jQuery),但它似乎没有触发任何东西:
import { mount } from 'enzyme';
page = <MyCoolPage />;
pageMounted = mount(page);
const button = pageMounted.find('#some_button');
expect(button.length).toBe(1); // It finds it alright
button.simulate('click'); // Nothing happens
9条答案
按热度按时间ilmyapht1#
#1使用Jest
下面是我如何使用Jest mock回调函数来测试click事件:
我还使用了一个名为enzyme的模块。Enzyme是一个测试工具,可以更容易地Assert和选择React组件
#2使用兴农
此外,您可以使用另一个名为Sinon的模块,它是一个独立的JavaScript测试间谍、存根和模拟。它看起来是这样的:
#3使用自己的间谍
最后,您可以制作自己的天真间谍(我不推荐这种方法,除非您有正当的理由)。
jw5wzhpr2#
已接受答案中的解决方案已弃用
**#4直接调用 prop **
酶模拟应该在版本4中删除。主要的维护者建议直接调用prop函数,这是simulate内部所做的。一种解决方案是直接测试调用这些props是否正确;或者,您可以模拟示例方法,测试prop函数调用它们,并对示例方法进行单元测试。
你可以调用click,例如:
或者
有关弃用的信息:Deprecation of .simulate() #2173
bsxbgnwa3#
使用Jest,你可以这样做:
hivapdat4#
Testing-library通过单击功能使您轻松完成此操作。
它是
user-event
库的一部分,可以用于每个dom环境(react、jsdom、browser……)doc中的例子:
0dxa2lsx5#
你可以使用类似下面的代码来调用在点击时编写的处理程序:
vsmadaxz6#
除了兄弟评论中建议的解决方案之外,你可以稍微改变一下你的测试方法,不要一次测试整个页面(使用深层子组件树),而是做一个独立的组件测试。这将简化
onClick()
和类似事件的测试(参见下面的示例)。这个想法是一次只测试一个组件,而不是一起测试所有**组件。在这种情况下,所有子组件都将使用jest.mock()函数进行模拟。
下面的示例说明了如何使用Jest和react-test-renderer在隔离的
SearchForm
组件中测试onClick()
事件。voase2hg7#
我需要做一点测试自己的按钮组件。这些测试对我有用;- )
x6yk4ghg8#
zbq4xfa09#
我总是用
fireEvent
测试按钮: