with event

  • <ReactElement> with event <string> <assertion>
  • <ReactElement> with event <string> <object> <assertion>

with event .... [on]

with event can trigger events in both the shallow and full renderer. For the normal full renderer, TestUtils.Simulate is used to simulate the event. For the shallow renderer, it is expected that there is a prop with the name on[EventName], where the first letter of the event is capitalised.

e.g. with a button that counts it's own clicks

 
var renderer = TestUtils.createRenderer()
renderer.render(<MyButton />);
 
expect(renderer, 'with event', 'click', 'to have rendered', <button>Button was clicked 1 times</button>);

This works with the component directly, as a shallow renderer is automatically created. Also note that due to unexpected's clever string handling, you can concatenated the with event and the event name.

expect(<MyButton />, 'with event click', 'to have rendered', <button>Button was clicked 1 times</button>);

If you want to trigger an event on a specific component, (i.e. not the top level component), use on after the event.

expect(<TodoList items={items} />, 'with event click', 'on', <TodoItem item={{ id: 3}} />, 
    'to contain', <span className="TodoItem--completed">do something</span>);

To pass arguments to the event, simply include the event object after the event name

expect(<TodoList items={items} />, 'with event mouseDown', { mouseX: 150, mouseY: 50 },
    'on', <TodoItem item={{ id: 3}} />,
    'to contain', <span className="TodoItem--completed">do something</span>);

This will call the function passed in the onMouseDown prop of the <TodoItem>.