Enzyme: Simulating "keyup" event on disabled input field should not call the event

[Mohinik11]

Hi,

I have to test disabled input field not to call onKeyUp event, but it has been called in each case whether I set disabled to true or false. Here is the example code:

I'm mounting the following component :

<Component 
        onSearch={OnSearch}
        placeholder="Placeholder Search"
        disabled={true}
      />

Component contains an Input field which sets props as:

<StyledInput
      onKeyUp={props.onSearch}
      placeholder={!props.disabled ? props.placeholder : ""}
      disabled={props.disabled}
    />

Here, every time I simulate the keyup event like :

wrapper.find('input').simulate("keyup", {target: {value: "test"}})

It results in calling onSearch irrespective of disabled prop.

I have tested placeholder value which is dependent on disabled prop value, that is working fine.

Is it the default behaviour of simulating "keyup" event that it gets fired irrespective of disabled/enabled input in jest/enzyme?

How should I test "not firing onKeyUp" when disabled is true?

[koba04]

@Mohinik11

The reason it's bad is because it's named "simulate" and it takes an event name, but it does not actually faithfully simulate anything. It's based on the historic implementation of the same method in the shallow renderer which suffers from the same problems. All it does is transform the event name to a prop name, and invoke the function in that prop.

https://github.com/airbnb/enzyme/issues/2173

The above comment shows what simulate does.
simulate invokes a prop function that based on the event name passed as an argument.

IMHO, I think when an input element is disabled, keyup events never happen is a test for browser implementations so it's enough only to verify the input is disabled for me.

[ljharb]

That's all correct.

You should not be testing React itself, or the browser - all you need to test is that your onSearch prop function does what's expected; that Component renders a StyledInput with a onKeyUp prop; and that when you invoke that onKeyUp prop, your onSearch prop function is invoked.

[Mohinik11]

Thank you.
Reading these comments made simulate clear to me, nothing related to it is available in docs.
I'm skipping this scenario now which is anyways testing browser :)

[koba04]

@Mohinik11 Would you mind closing this?