在React Jest中如何测试一个功能？

Question

我的按钮位于组件内部，单击时会调用deleteData方法。我如何测试在按一下按钮时就调用deleteData方法？

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

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

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 />));
    button.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 />));
    button.find('button').simulate('click');
    component.update();
    expect(FakeFun).toHaveBeenCalled();
  });