with event

  • <RenderedReactElement> with event <string> <assertion>
  • <RenderedReactElement> 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 component = TestUtils.renderIntoDocument(<MyButton />);
 
expect(component, '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(component, '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>.

Multiple events

To call multiple events, simple list them one after the other:

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

You can optionally add and before the second and further events, to make it easier to read:

expect(<TodoList items={items} />, 
    'with event mouseDown', { mouseX: 150, mouseY: 50 },
    'on', <TodoItem item={{ id: 3}} />,
    'and with event mouseDown', { mouseX: 50, mouseY: 50 },
    'on', <TodoItem item={{ id: 2}} />,
    'to have rendered', 
    <div>
      <TodoItem item={{ id: 2 }}>
         <span className="completed" />
      </TodoItem>
      <TodoItem item={{ id: 3 }}>
         <span className="completed" />
      </TodoItem>
    </div>
);