Test setting text value with React and Enzyme
Solution 1
To really understand what's happening in your code it would be useful to see your component code (specifically your onChange
handler.
However, in regards to the following code:
input.simulate('change', {target: {value: 'abc'}});
This won't actually change the value of your <input />
element, instead it just causes your onChange
function to be run and be provided an event object that looks like {target: {value: 'abc'}}
.
The idea is that your onChange
function would update your state or store, so triggering this function should result in your DOM being updated. If you don't actually have an onChange
handler defined using input.simulate('change')
won't do anything.
So, if your goal is to actually set the value of an input and not trigger an onChange
handler then you can use JS to manually update the DOM using something like wrapper.find('#my-input').node.value = 'abc';
however this is circumventing React's render cycle and you'll likely see this value cleared/removed if you do anything to trigger a re-render.
Solution 2
I'm using React 16
and Enzyme 3.10
over here and this completely worked for me (after trying too many different suggestions out there):
wrapper.find("input").instance().value = "abc";
Apparently, in previous versions you could use node
or getNode()
instead of instance()
, which were parts of my many previous attempts.
Solution 3
This works for both Enzyme 3 and Enzyme 2:
wrapper.find('input').getDOMNode().value = 'new value';
wrapper.find('input').simulate('change');
.getDOMNode()
can be used like .node
in Enzyme 2 and like .instance()
in Enzyme 3.
Solution 4
If using TypeScript you can do the following
wrapper.find('input').getDOMNode<HTMLInputElement>().value = 'new value';
wrapper.find('input').simulate('change');
GN.
Updated on July 09, 2022Comments
-
GN. almost 2 years
How do you set the text of a text input and then test it's value with React / Enzyme?
const input = wrapper.find('#my-input'); input.simulate('change', { target: { value: 'abc' } } ); const val = input.node.value; //val is ''
All the solutions here appear not to work..