web-dev-qa-db-ja.com

機能が反応および酵素と呼ばれるかどうかをテストします

私は私のreactコンポーネントでメソッドの1つをテストしようとしています。ボタンをクリックした後に呼び出されるので、酵素を使ったシミュレーションがあります

 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は、ユーザーがシミュレーション内のボタンをクリックしたときに呼び出されますが、正常に呼び出されたことをテストするにはどうすればよいですか？

reactjssinonenzyme
14
Jake

2つのオプションがあります。コンポーネントをレンダリングする前に、コンポーネントのプロトタイプの__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
});
_
5
Alexandr Lazarev