如何在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事件會觸發它。