simulate('change' ...) on input not updating its value

[Nikhil22]

Current behavior

As the title says, when I try to simulate a change on my <input/>, the input's value remains the same - it doesn't change.

Here is my HTML. This <input/> is within a <form/>

<input 
   className="w-100 ba b--black-20 br1 pa3 bg--easy-gray mb2" 
   type="text" 
   name="firstName" 
   ref={register({ required: true })}
/>

register is from the useForm hook of react-hook-form.

Here is my mount.

const signup = mount(
   <Provider store={mockStore}>
        <Router history={history}>
               <Signup />
          </Router>
   </Provider>,
)

The <form/> and <input/> are within the <Signup/> component.

Here is my enzyme code

const firstNameInput = signup.findWhere((n) => n.prop('name') === 'firstName')
firstNameInput.simulate('change', {target: {value: 'Nikhil'}})
await act( async () => {
    signup.update();
})
console.log(firstNameInput.props())

Here is the output

 {
    className: 'w-100 ba b--black-20 br1 pa3 bg--easy-gray mb2',
    type: 'text',
    name: 'firstName'
}

I don't see value anywhere.

Expected behavior

 {
    className: 'w-100 ba b--black-20 br1 pa3 bg--easy-gray mb2',
    type: 'text',
    name: 'firstName',
    value: 'Nikhil'
}

Your environment

API

• shallow
• mount
• render

Version

library	version
enzyme	^3.11.0
react	^16.13.1
react-dom	^16.13.1"
react-test-renderer
adapter (below)

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )

[ljharb]

simulate shouldn't be used; it doesn't faithfully simulate anything.

If you want to change the input's value, set the value prop on it; if you want to invoke an onChange, invoke it.

If you're doing something unidiomatic for React, and binding events directly to reffed DOM elements, then you'll have to test them by directly interacting with the DOM elements as well.

[Nikhil22]

Can you please tell me how to do this in enzyme?

setProps won't work because the <input> is a child o the component <Signup> being mounted.

[ljharb]

in this case, you're not actually using onChange, you're letting react-hook-form manipulate the DOM directly. I'm not really sure how you'd test that; that sounds like a react antipattern to me tbh :-/

[codeDude64]

@ljharb But if simulate doesn't simulate the events How can I simulate my onChange function?

I mean in my case I have an input text, it has a event onChange that updates the state and it have the attribute value with the state.

<input type="text" onChange={changeCategory} value={newCategory} />

[janzenz]

I'm late to the party. I just learned that simulate is deprecated. I think the confusion for people is because this info isn't so clear in the doc. There is an existing PR for this atm.