在Jest中模拟按钮点击

javascript reactjs jestjs testing enzyme

2022-08-30 04:40:47

模拟按钮单击似乎是一个非常简单/标准的操作。然而，我无法让它在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

#1 使用开玩笑

这就是我如何使用Jest mock回调函数来测试点击事件：

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的模块，它是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);
});

答案 2

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

#4 直接调用道具

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

您可以调用 click，例如：

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

或

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

有关弃用的信息：弃用 .simulate（） #2173