Test setting text value with React and Enzyme

Question

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..

It appears that you need to use `mount` for it to work properly. — sigod, Mar 22 '17 at 11:25
Possible duplicate of [Enzyme - How to access and set value?](https://stackoverflow.com/questions/37219772/enzyme-how-to-access-and-set-input-value) — Islam Murtazaev, May 22 '19 at 05:11

score 33 · Accepted Answer · answered Jan 19 '17 at 01:48

33

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.

answered Jan 19 '17 at 01:48

levi

2,014
2
15
15

3

I am trying to set the value with `input.node.value = "Test"`, and I am getting this error `TypeError: Can't add property value, object is not extensible`. Any ideas? – jhamm Aug 10 '17 at 16:26
@jhamm Check out my answer below. – leandroico Nov 08 '17 at 13:51
you might need to remove target / value: input.simulate('changeText', '6'); – Jason G Dec 19 '18 at 18:45
I also had the issue of: **TypeError: Cannot add property value, object is not extensible**. What resolved it for me was changing `node.find('#id_name').get(0).value =` to `node.find('#id_name').instance().value =` – Paul Pritchard Jul 16 '19 at 07:05

score 25 · Answer 2 · answered Nov 08 '17 at 13:51

25

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.

answered Nov 08 '17 at 13:51

leandroico

1,207
13
17

1

I used `.node` but Enzyme told me to use `getElement()` but that gave me the react element and not the dom element. Thx for sharing the `instance()` function. – velop Nov 14 '17 at 13:54
10

`typescript` is failing with error: `TS2339: Property value does not exist on type Component<{}, {}>` . Can you please help? – user2133404 Dec 07 '18 at 00:13
2

@user2133404 Sorry, man...but I have no idea how to tackle this, given I've never worked with Typescript before. – leandroico Dec 12 '18 at 16:04
1

Typescript needs to know what type of element you're dealing with specifically. In this case `wrapper.find("input").instance().value = "abc";` would work. – zackkrida Jul 24 '19 at 02:14

score 11 · Answer 3 · answered Jan 08 '18 at 07:36

11

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.

answered Jan 08 '18 at 07:36

Eran Shabi

14,201
7
30
51

1

Enzyme 3.3.x `wrapper.getDOMNode is not a function`. Looks like it's only for `mount` https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/getDOMNode.md – Maciej Gurban May 29 '18 at 02:19

score 2 · Answer 4 · answered Dec 08 '19 at 18:44

2

If using TypeScript you can do the following

wrapper.find('input').getDOMNode<HTMLInputElement>().value = 'new value';
wrapper.find('input').simulate('change');

answered Dec 08 '19 at 18:44

Joseph King

5,089
1
30
37

score 0 · Answer 5 · answered Jan 02 '19 at 06:31

Here it works for me..

I have change the input text, with value updation. And Update my DOM property.

.update()

After updating I am checking the button disable property with input mobile number length use cases.

const input = MobileNumberComponent.find('input')
input.props().onChange({target: {
   id: 'mobile-no',
   value: '1234567900'
}});
MobileNumberComponent.update()
const Footer = (loginComponent.find('Footer'))
expect(Footer.find('Buttons').props().disabled).equals(false)

Test setting text value with React and Enzyme

5 Answers5