在 Jest 中模拟按钮单击

新手上路,请多包涵

模拟按钮点击似乎是一个非常简单/标准的操作。然而,我无法让它在 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

原文由 foobar 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 2.5k
2 个回答

#1 使用玩笑

这就是我使用 Jest 模拟回调函数来测试点击事件的方式:

 import React from 'react';
 import { shallow } from 'enzyme';
 import Button from './Button';

 describe('Test Button component', () => {
 it('Test click event', () => {
 const mockCallBack = jest.fn();

 const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));
 button.find('button').simulate('click');
 expect(mockCallBack.mock.calls.length).toEqual(1);
 });
 });

我也在使用一个叫做 酵素 的模块。 Enzyme 是一个测试实用程序,可以更轻松地断言和选择您的 React 组件

#2 使用诗乃

此外,您可以使用另一个名为 Sinon 的模块,它是 JavaScript 的独立测试间谍、存根和模拟。这是它的外观:

 import React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';

 import Button from './Button';

 describe('Test Button component', () => {
 it('simulates click events', () => {
 const mockCallBack = sinon.spy();
 const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));

 button.find('button').simulate('click');
 expect(mockCallBack).toHaveProperty('callCount', 1);
 });
 });

#3 使用你自己的间谍

最后,您可以制作自己的幼稚间谍(除非您有正当理由,否则我不推荐这种方法)。

 function MySpy() {
 this.calls = 0;
 }

 MySpy.prototype.fn = function () {
 return () => this.calls++;
 }

 it('Test Button component', () => {
 const mySpy = new MySpy();
 const mockCallBack = mySpy.fn();

 const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));

 button.find('button').simulate('click');
 expect(mySpy.calls).toEqual(1);
 });

原文由 Saman 发布,翻译遵循 CC BY-SA 4.0 许可协议

已接受答案中的解决方案已被弃用

#4 直接调用 prop

Enzyme simulate 应该在版本 4 中被删除。主要维护者建议直接调用 prop 函数,这是 simulate 在内部所做的。一种解决方案是直接测试调用这些道具是否正确;或者您可以模拟实例方法,测试 prop 函数是否调用它们,并对实例方法进行单元测试。

您可以调用 click,例如:

 wrapper.find('Button').prop('onClick')()

要么

wrapper.find('Button').props().onClick()

有关弃用 的信息:弃用 .simulate() #2173

原文由 Black 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题