simulating an onClick method with a parameter using Enzyme in React

Question

I'm trying to simulate an onClick method in my unit tests using Enzyme for React. I've found many guides to simulating an onClick that takes some event e, such as:

handleClick(e) {
    // Does something
}

....
<MyComponent
onClick = {handleClick}
></MyComponent>

However I want to be able to simulate my onClick which does not take the event as a parameter but takes something else instead, ie:

onClick = {() => handleClick(myParam)}

I've tried using .simulate('click', [myParam]); but it did not pass the parameter as I expected.

How would I go about simulating a click that sends a specific parameter to the handler?

Tal Avissar · Accepted Answer · 2017-07-06 22:58:06Z

5

according to the documentaton it states that:

.simulate(event[, mock]) => Self Simulate events

Arguments

event (String): The event name to be simulated mock (Object [optional]): A mock event object that will be merged with the event object passed to the handlers.

so you need to fix your code and pass an object:

.simulate('click', {myParam});

You can also take a look at the implementaion and see how it is passed to the event handler here:

simulate(event, ...args) {
    const handler = this.prop(propFromEvent(event));
    if (handler) {
      withSetStateAllowed(() => {
        // TODO(lmr): create/use synthetic events
        // TODO(lmr): emulate React's event propagation
        performBatchedUpdates(this, () => {
          handler(...args);
        });
        this.root.update();
      });
    }
    return this;
  }

edited Jul 6, 2017 at 22:58

answered Jul 6, 2017 at 22:53

Tal Avissar

10.3k6 gold badges49 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tevon Strand-Brown Over a year ago

Ok, that make sense. the 'mock event object' confused me. So that can just be whatever object is passed to the event handler?

Tevon Strand-Brown Over a year ago

Can't for 10 min after post :/ will soon!

Collectives™ on Stack Overflow

simulating an onClick method with a parameter using Enzyme in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related