模拟按钮点击似乎是一个非常简单/标准的操作。然而，我无法让它在 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
#1 使用 Jest
这就是我如何使用 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);
});
});
我还使用了一个名为酶的module。Enzyme 是一个测试实用程序，可以更轻松地断言和选择您的 React 组件
#2 使用诗乃
此外，您还可以使用另一个名为Sinon 的module，它是 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);
});
已接受答案中的解决方案已被弃用
#4 直接调用 prop
酶模拟应该在版本 4 中被删除。主要维护者建议直接调用 prop 函数，这就是模拟在内部所做的。一种解决方案是直接测试调用这些props是否正确；或者您可以模拟实例方法，测试 prop 函数是否调用它们，并对实例方法进行单元测试。
您可以调用 click，例如：
wrapper.find('Button').prop('onClick')()
或者
wrapper.find('Button').props().onClick()
关于弃用的信息： 弃用 .simulate() #2173
使用 Jest，你可以这样做：
test('it calls start logout on button click', () => {
const mockLogout = jest.fn();
const wrapper = shallow(<Component startLogout={mockLogout}/>);
wrapper.find('button').at(0).simulate('click');
expect(mockLogout).toHaveBeenCalled();
});
您可以使用这样的方法来调用单击时编写的处理程序：
import { shallow } from 'enzyme'; // Mount is not required
page = <MyCoolPage />;
pageMounted = shallow(page);
// The below line will execute your click function
pageMounted.instance().yourOnClickFunction();
除了兄弟评论中建议的解决方案之外，您可以稍微改变您的测试方法，而不是一次测试整个页面（使用深子组件树），而是进行独立的组件测试。这将简化对onClick()类似事件的测试（参见下面的示例）。
这个想法是一次只测试一个组件，而不是一起测试所有组件。在这种情况下，所有子组件都将使用jest.mock()函数进行模拟。
这是一个如何使用Jest和react-test-rendereronClick()在隔离SearchForm组件中测试事件的示例。
import React from 'react';
import renderer from 'react-test-renderer';
import { SearchForm } from '../SearchForm';
describe('SearchForm', () => {
it('should fire onSubmit form callback', () => {
// Mock search form parameters.
const searchQuery = 'kittens';
const onSubmit = jest.fn();
// Create test component instance.
const testComponentInstance = renderer.create((
<SearchForm query={searchQuery} onSearchSubmit={onSubmit} />
)).root;
// Try to find submit button inside the form.
const submitButtonInstance = testComponentInstance.findByProps({
type: 'submit',
});
expect(submitButtonInstance).toBeDefined();
// Since we're not going to test the button component itself
// we may just simulate its onClick event manually.
const eventMock = { preventDefault: jest.fn() };
submitButtonInstance.props.onClick(eventMock);
expect(onSubmit).toHaveBeenCalledTimes(1);
expect(onSubmit).toHaveBeenCalledWith(searchQuery);
});
});