ffxsam ffxsam - 1 month ago 26
React JSX Question

Enzyme - How to access and set <input> value?

I'm confused about how to access

<input>
value when using
mount
. Here's what I've got as my test:

it('cancels changes when user presses esc', done => {
const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input');

console.log(input.render().attr('value'));
input.simulate('focus');
done();
});


The console prints out
undefined
. But if I slightly modify the code, it works:

it('cancels changes when user presses esc', done => {
const wrapper = render(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input');

console.log(input.val());
input.simulate('focus');
done();
});


Except, of course, the
input.simulate
line fails since I'm using
render
now. I need both to work properly. How do I fix this?

EDIT:

I should mention,
<EditableText />
is not a controlled component. But when I pass
defaultValue
into
<input />
, it seems to set the value. The second code block above does print out the value, and likewise if I inspect the input element in Chrome and type
$0.value
in the console, it shows the expected value.

Answer

Got it. (updated/improved version)

  it('cancels changes when user presses esc', done => {
    const wrapper = mount(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    input.simulate('focus');
    input.simulate('change', { target: { value: 'Changed' } });
    input.simulate('keyDown', {
      which: 27,
      target: {
        blur() {
          // Needed since <EditableText /> calls target.blur()
          input.simulate('blur');
        },
      },
    });
    expect(input.get(0).value).to.equal('Hello');

    done();
  });
Comments