在 Jest 中模拟按钮单击

Question

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

Answer 1

#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 许可协议

Answer 2

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

#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 许可协议