javascript - 在 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 模拟回调函数来测试点击事件:

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 和模拟。这是它的样子:

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 使用你自己的 spy

最后，您可以制作自己的 naive spy(我不推荐这种方法，除非您有正当理由)。

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