react: event.currentTarget can't be specified in TestUtils.Simulate

So I have an element that has a listener that uses currentTarget for some stuff and while I was doing some test for it I saw that when using Simulate to trigger an event no matter that you specify the currentTarget it will always be the original element.

There is a dumb example here: http://jsbin.com/sazovikiga/1/edit?js,console,output

If you click in the h1 it will log the target tagName and the currentTarget tagName after doing:

Simulate.keyUp(element, {target: {tagName: 'TARGET'}, currentTarget: {tagName: 'CURRENT'}});

So i was expecting that in the listener if I checked the currentTarget.tagName i would get “CURRENT” but I get the actual element while for target I got the (I think right value of) “TARGET” name instead of the element.

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 2
Comments: 23

Commits related to this issue

Remove improper user interaction work-in-progress Enzyme is not intended to test toggling a checkbox. See https://github.com/facebook/react/issues/4950. Test initial render RuleRow. Make query an op... — committed to influxdata/chronograf by jaredscheib 6 years ago

Most upvoted comments

If you are working with Typescript then I recommend using the following actions. (combination of the comments written below)

const inputElement = input.getDOMNode() as HTMLInputElement;
inputElement.value = "another_new_value";
input.update();
input.simulate("change");

https://github.com/airbnb/enzyme/issues/218#issuecomment-388481390 https://github.com/airbnb/enzyme/issues/1850#issuecomment-456791477

Joshua-rose on May 6, 2019

Thank you for the explanation, it makes a lot of sense.

Unfortunately I am actually using Enzyme (that as far as I know underlying uses the testUtils Simulate) to write the tests and as far as I know it doesn’t allow to mutate the actual dom node.

Even if Simulate doesn’t really change the DOM state of inputs, it still allows to pass custom data to the event.target object with Simulate.change(node, {target:{value:“whatever”}}). Wouldn’t be possible to allow simulate to do the same to currentTarget? That at least would allow to at least test the event handlers, since now it is just impossible in my scenario.

(Ps: I am using currentTarget instead of target in my event handlers mainly because I am using typescript and if I know that I am interested in the events on a html input I can at compile time check event.currentTarget.value in a typesafe manner, since target by definition is dynamic and cannot be known at compiletime. )

MastroLindus on Oct 24, 2016

thank you @Joshua-rose

i was trying to simulate checking a checkbox. using your sample, this ended up working for me

await act(async () => {
  const domNode = wrapper.find(selector).getDOMNode() as HTMLInputElement;
  domNode.checked = true;
  wrapper.find(selector).simulate('change');
});

zwbetz-gh on Apr 18, 2020

You shouldn’t be able to specify currentTarget; it should get set automatically to correspond to the event handler receiving the event. If that’s not working then it’s probably just a bug.

sophiebits on Sep 24, 2015