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

Question

Say you want a React component that "raises a custom event", like this checkbox (here in 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

Now I want to write a test that uses the component and simulate the event:

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

This won't work. There's no checkedChange on simulate, and if there was it would only emit an event that no one listens to, as the onCheckedChange handler is not hooked up to anything, but just invoked directly. And maybe it's not supposed to work.

But the questions are:

How do I write the CustomCheckbox so that it raises and subscribes to events in the same way React's own components, like <div> and <a> do?

Can I write the CustomCheckbox so I can use ReactTestUtils to simulate the checkedChanged event?

If not, how is a component using other reusable components supposed to be tested without knowing the internals of the reusable component?

UPDATE

I've updated the question a tiny bit to be more specific to the problem. I've added a little more complexity to the html generated by the component. The problem is more precisely: How can I simulate events without knowing the internals of a complex component?

Answer 1

You're not firing a custom event. Your event is a click event, and your handler is an onClick handler, so using simulate.click should work.

If you want to make sure that the checkedChange handler is called when the click event happens, you should pass a mock handler in your test and spy on it. I don't know what the syntax would be in coffeescript, but something like this:

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();

You can unit test the custom check box component to see that isChecked actually changes too, but its using the onClick event, not another event.

Also, you can pass the handler as an onClick handler in the props, and then its obvious from outside that the click event triggers it.