在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

Answer 1

#1使用Jest

这就是我使用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);
  });
});

我也在使用一个名为酶的模块 Enzyme是一个测试实用程序,可以更容易地断言和选择你的React组件

#2使用Sinon

您还可以使用另一个名为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);
});

Answer 2

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

#4 直接调用 prop

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

您可以调用 click，例如：

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

或者

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

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

Answer 3

测试库通过点击功能让您轻松完成此操作。

它是user-event库的一部分，可用于每个 dom 环境（react、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()
})

Answer 4

使用笑话，您可以这样做：

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