在 Jest 中模拟按钮单击

小开

最佳答案

# 1使用玩笑

下面是我如何使用 Jest 模拟回调函数来测试 click 事件:

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);
});
});

我还使用了一个名为酶的模块。酶是一个测试实用工具，使它更容易断言和选择您的反应组分

# 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);
});

小开

您可以使用类似的东西来调用在 click 上编写的处理程序:

import { shallow } from 'enzyme'; // Mount is not required


page = <MyCoolPage />;
pageMounted = shallow(page);


// The below line will execute your click function
pageMounted.instance().yourOnClickFunction();

小开

使用 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();
});

小开

除了兄弟注释中建议的解决方案之外，您可以稍微测试一下 改变你的测试方法，但不要一次测试整个页面(使用深层子组件树) ，而是执行 与世隔绝组件测试。这将简化 onClick()和类似事件的测试(参见下面的例子)。

这个想法是一次只测试一组件和它们的 不全是组件。在这种情况下，将使用 Jest.mock ()函数模拟所有子组件。

下面的例子说明了如何使用开玩笑的和反应-测试-渲染器在独立的 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);
});
});

小开

以公认答案提出的解决方案遭到反对

# 4直接呼叫道具

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

你可以调用 click，例如:

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

或者

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

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

小开

测试库使您在使用点击功能时更容易做到这一点。

它是 user-event库的一部分，可以用于每个 dom 环境(response、 jsdom、浏览器...)

来自文档的例子:

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()
})

小开

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();
});
});