测试函数是否称为反应和酶

小编典典

测试函数是否称为反应和酶

reactjs

我正在尝试测试react组件中的一种方法。单击按钮后调用它，所以我用酶进行了模拟

 it('clone should call handleCloneClick when clicked', () => {
        const cloneButton = wrapper.find('#clone-btn');
        cloneButton.simulate('click');
 });

我的组件方法在这里：

_handleCloneClick(event) {
    event.preventDefault();
    event.stopPropagation();

    this.props.handleClone(this.props.user.id);
}

当用户单击模拟中的按钮时，将调用_handleCloneClick，我该如何测试是否成功调用了它？

阅读 211

2020-07-22

共1个答案

小编典典

有两种选择，要么_handleCloneClick在呈现组件之前就监视组件的原型，要么：

export default class cloneButton extends Component {
  constructor(...args) {
    super(...args);
    this. _handleCloneClick = this. _handleCloneClick.bind(this);
  }

  _handleCloneClick() {
    event.preventDefault();
    event.stopPropagation();

    this.props.handleClone(this.props.user.id);
  }

  render() {
    return (<button onClick={this. _handleCloneClick}>Clone</button>);
  }
}

在您的测试中：

it('clone should call handleCloneClick when clicked', () => {
  sinon.spy(cloneButton.prototype, '_handleCloneClick');
  const wrapper = mount(<cloneButton/>);
  wrapper.find('#clone-btn').simulate('click');
  expect(spy).toHaveBeenCalled() //adept assertion to the tool you use
});

或者，您可以尝试在渲染组件后设置间谍并wrapper.update()随后调用：

it('clone should call handleCloneClick when clicked', () => {      
  const wrapper = mount(<cloneButton/>);
  sinon.spy(wrapper.instance(), "_handleCloneClick");
  wrapper.update();
  wrapper.find('#clone-btn').simulate('click');
  expect(spy).toHaveBeenCalled() //adept assertion to the tool you use
});

2020-07-22