在Jest中调用React的this.props.onClick(this)时我究竟要测试什么？

Question

我一直在为我的所有事件(以及其他所有事件)编写测试但是我对如何测试this.props.onClick(this)在子组件上调用感到茫然.

我的子组件具有以下代码:

closeModal: function() {
  this.props.onClick(this);
},

render: function() {
  return (
    <i className="close-icon" onClick={this.closeModal}></i>
  )
}

并且父母正在这样听:

onCloseModal: function() {
  this.replaceState({
    modalStatus: 'hidden'
  });
},

render: function() {
  return (
    <QuestionModal modalStatus={this.state.modalStatus} onClick={this.onCloseModal} />
  )
}

我知道如何测试父母的点击事件,我知道如何在测试中调用孩子的按钮点击事件,但我不确定我应该准确测试什么.

如果我使用了Sinon和Jasmine,我会将closeModal方法存根并检查它是否被调用.我可以用Jest做到这一点,如果是这样,究竟是怎么回事？

UPDATE

我已经尝试过根据@ PhilVarg的答案编写测试但我没有达到很远,因为我无法模拟closeModal.

这是我的测试:

      var closeIcon,
          myMock = jest.genMockFunction();

      form = TestUtils.renderIntoDocument(
        <QuestionForm />
      );
      form.closeModal = myMock;

      closeIcon = TestUtils.findRenderedDOMComponentWithClass(form, 'close-icon');

      TestUtils.Simulate.click(closeIcon);

      expect(form.closeModal).toBeCalled();

调用预期函数的测试错误.并且closeModal没有被模拟但仍然运行(我现在有一个控制台日志).我整个下午一直在这里,但一直都没能弄清楚.任何帮助将非常感激.

Answer 1

感谢菲尔的一些建议,我终于明白了.我想测试的是当我点击图标时调用closeModal.我已经测试过,父组件的行为与预期的一样,但是我无法弄清楚如何模拟closeModal,因为我正在测试这个特定的组件,默认情况下,这是Jest不会为我模拟的唯一一个.我可以手动存根,但不知何故不想工作.

我现在所做的就是模拟this.props.onClick在closeModal中,我检查它是否会触发.

以下是代码中的外观:

describe('QuestionForm', function() {
  var onClickFunc,
      form;

  beforeEach(function() {
    onClickFunc = jest.genMockFunction();

    form = TestUtils.renderIntoDocument(
      <QuestionForm onClick={onClickFunc} />
    );
  });

  it('should call closeModal when the icon is clicked', function() {
    var closeIcon = TestUtils.findRenderedDOMComponentWithClass(form, 'close-icon');

    TestUtils.Simulate.click(closeIcon);

    expect(onClickFunc).toBeCalled();
  });

});

我认为这足以测试closeModal的行为与预期一致.