模拟按钮点击似乎是一个非常简单/标准的操作。然而，在 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);
});
});
我还使用一个名为enzyme的模块。Enzyme是一个测试实用工具，它可以更轻松地断言和选择你的React组件。
#2 使用Sinon
此外，您还可以使用另一个名为Sinon的模块，它是 JavaScript 的独立测试 spy、stub 和 mock。这是它的外观：
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);
});
handleClick 方法。我该如何测试当按钮被点击时 handleClick 是否真的被调用了？ - Jeremy Moritz已被接受的答案中的解决方案已经过时
#4 直接调用prop
Enzyme simulate在版本4中应该被移除。主要维护者建议直接调用prop函数，这就是simulate内部所做的。一种解决方法是直接测试调用这些props是否正确；或者您可以模拟实例方法，测试prop函数是否调用了它们，并对实例方法进行单元测试。
例如，您可以调用click：
wrapper.find('Button').prop('onClick')()
或者
wrapper.find('Button').props().onClick()
关于弃用的信息： .simulate()方法被弃用 #2173
wrapper.update()，因为 enzyme 可能无法注意到发生的更改。 - HinrichonClick 属性的按钮怎么办？比如在 <form /> 中的 type="submit" 按钮？是的，可以在表单上调用 onSubmit - 但这并不理想。用户会点击按钮，这就是你想要测试的。 - Oli act(() => {
component.root.findByType('button').props.onClick({
preventDefault: jest.fn(),
stopPropagation: jest.fn(),
});
});（请注意，这是计算机编程术语，翻译时需要根据上下文进行适当的翻译） - nfroidure使用 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();
});
使用click函数可以轻松实现Testing-library的这一功能。
它是user-event库的一部分，可用于每个dom环境（react、jsdom、browser等）。
以下是文档中的示例：
import React from 'react'
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
test('click', () => {
render(
<div>
<label htmlFor="checkbox">Check</label>
<input id="checkbox" type="checkbox" />
</div>,
)
userEvent.click(screen.getByText('Check'))
expect(screen.getByLabelText('Check')).toBeChecked()
})
我总是使用 fireEvent 来测试按钮：
import { fireEvent } from "@testing-library/react";
it("Button onClick", async () => {
const handleOnClick = jest.fn();
const { getByTestId } = render(<Button onClick={handleOnClick} />);
const element = getByTestId("button");
fireEvent.click(element);
expect(handleOnClick).toBeCalled();
expect(element).toHaveClass("animate-wiggle");
});
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()等事件的测试（见下面的示例）。SearchForm组件中测试onClick()事件。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);
});
});
我需要自己对按钮组件进行一些测试。这些测试对我来说有效；-）
import { shallow } from "enzyme";
import * as React from "react";
import Button from "../button.component";
describe("Button Component Tests", () => {
it("Renders correctly in DOM", () => {
shallow(
<Button text="Test" />
);
});
it("Expects to find button HTML element in the DOM", () => {
const wrapper = shallow(<Button text="test"/>)
expect(wrapper.find('button')).toHaveLength(1);
});
it("Expects to find button HTML element with className test in the DOM", () => {
const wrapper = shallow(<Button className="test" text="test"/>)
expect(wrapper.find('button.test')).toHaveLength(1);
});
it("Expects to run onClick function when button is pressed in the DOM", () => {
const mockCallBackClick = jest.fn();
const wrapper = shallow(<Button onClick={mockCallBackClick} className="test" text="test"/>);
wrapper.find('button').simulate('click');
expect(mockCallBackClick.mock.calls.length).toEqual(1);
});
});
import React from "react";
import { shallow } from "enzyme";
import Button from "../component/Button/Button";
describe("Test Button component", () => {
let container = null;
let clickFn = null;
beforeEach(() => {
clickFn = jest.fn();
container = shallow(<Button buttonAction={clickFn} label="send" />);
});
it("button Clicked", () => {
container.find("button").simulate("click");
expect(clickFn).toHaveBeenCalled();
});
});
console.warn，以查看它是否在Jest控制台中触发？ - TobyMyCoolPage组件的代码，否则很难确定实际问题所在。 - Andreas Köberle