如何在ReactJS中使用适当的，可测试的事件处理程序制作可重用组件

Question

假设您需要一个“引发自定义事件”的React组件，例如此复选框（在CoffeeScript中，此处）：

CustomCheckbox = React.createClass
  displayName: "Checkbox"

  getDefaultProps: -> 
    onCheckedChange: () ->

  render: -> 
    <div className="parent">
        <div className={className} onClick={@onClick}></div>
    </div>

  onClick: -> 
    @props.onCheckedChange(); // call the given event handler directly

现在，我想编写一个使用该组件并模拟事件的测试：

describe 'SomeOtherComponentThatUsesACheckbox', ->
  it "some other component that uses a checkbox handles onCheckedChanged", ->
    isChecked = false
    handler = () -> isChecked = true

    checkbox = ReactTestUtils.renderIntoDocument(
      <CustomCheckbox onCheckedChange={handler} />
    );

    ReactTestUtils.Simulate.checkedChange(checkbox)

    isChecked.should.be.equal true

这行不通。 在Simulation上没有checkedChange，如果有，它只会发出一个没人听的事件，因为onCheckedChange处理程序不会挂接到任何东西，而只是直接调用。 也许它不应该起作用。

但是问题是：

我该如何编写CustomCheckbox，使其以与React自己的组件（如<div>和<a>一样）的方式引发和订阅事件？

我可以编写CustomCheckbox以便可以使用ReactTestUtils模拟checkedChanged事件吗？

如果不是，在不知道可重用组件内部的情况下，应该如何测试使用其他可重用组件的组件？

UPDATE

我已对问题进行了一点点更新，以更具体地解决该问题。 我为组件生成的html增加了一些复杂性。 问题更确切地说是：如何在不了解复杂组件内部的情况下模拟事件？

Answer 1

您没有触发自定义事件。 您的事件是一个click事件，您的处理程序是一个onClick处理程序，因此使用simulate.click应该可以。

如果要确保在单击事件发生时调用了checkedChange处理程序，则应在测试中传递一个模拟处理程序并对其进行监视。 我不知道coffeescript中的语法是什么，但是像这样：

describe 'SomeOtherComponentThatUsesACheckbox',
  -> it "some other component that uses a checkbox handles onCheckedChanged", -> isChecked = false
  handler = () -> jasmine.createSpy()
      checkbox = ReactTestUtils.renderIntoDocument(
        <CustomCheckbox onCheckedChange={handler} />
      );
  ReactTestUtils.Simulate.click(checkbox) 
  expect(handler).toHaveBeenCalled();

您可以对自定义复选框组件进行单元测试，以查看isChecked实际上也发生了变化，但是使用onClick事件（而不是其他事件）对其进行了更改。

另外，您可以在道具中将处理程序作为onClick处理程序传递，然后从外部可以明显看出click事件会触发它。