如何在React Jest中测试一个函数是否被调用？

Question

我有一个按钮在组件内，当点击该按钮时会调用deleteData方法。如何使用Jest测试按钮点击是否调用了deleteData方法？

<Modal.Footer>
  <Button id="trashBtn" onClick={this.deleteData}>Delete</Button>
<Modal.Footer>

deleteData() {
    {/* TODO :*/}
  }

- Sathesh

---

根据@aravind_reddy的回答，使用Enzyme API中的simulate()。实际上，在幕后它只是直接调用onClick属性（请参见文档）。所以，如果你模拟点击按钮并且调用了deleteData，那么你可以确定onClick指定的方法已经被调用。 - Daniel Bank

Answer 1

你可以像这样做：

我假设你的按钮在某个组件中，我将使用该组件的名称作为ComponentName

import React from 'react';
import { shallow } from 'enzyme';
import ComponentName from './ComponentName'

describe('Test Button component', () => {
  it('Test click event', () => {

    const component = shallow((<ComponentName />));
    component.find('button').simulate('click');
    //write an expectation here if suppose you are setting state in your deleteData function you can do like this
    component.update();//if you are setting state
    expect(component.state().stateVariableName).toEqual(value you are expecting after setState in deleteData);  
  });
});

编辑：我们可以使用spyOn来测试函数调用的纯文本：

  it('calls click event', () => {
    const FakeFun = jest.spyOn(ComponentName.prototype, 'deleteData');
    const component = shallow((<ComponentName />));
    component.find('button').simulate('click');
    component.update();
    expect(FakeFun).toHaveBeenCalled();
  });

- aravind_reddy

---

嗨，是的，我能够验证状态已更改，但是否有一种方法可以测试deleteData方法是否被调用，例如isCalled方法或类似的方法，可以测试方法是否正在被调用而不测试状态更改？ - Sathesh

我已经添加了一个编辑，你可以在Jest中使用spyOn方法来监视你的函数，然后检查它是否被调用。 - aravind_reddy

嗨，谢谢。Spy功能完美地运行了，这正是我所需要的。 - Sathesh

我认为测试一个函数是否被调用总是比测试一些输入/输出/副作用更糟糕，因为它需要深入了解你正在测试的内部机制。除非你需要确保XHR不会发出或类似的情况，否则我不确定为什么有人会倾向于第二种方式。 - Ruan Mendes

@raquelhortab 我不确定它。 - aravind_reddy