1. ホーム
  2. unit-testing

[解決済み] Enzyme - How to access and set <input> value?

2022-05-16 15:32:12

Question

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 :

言っておきますが <EditableText /> は制御されたコンポーネントではありません。しかし、私が defaultValue<input /> と入力すると、値が設定されるようです。上記の2番目のコードブロックは値を出力します。同様に、Chromeで入力要素を調べて、次のように入力します。 $0.value と入力すると、期待通りの値が表示されます。

どのように解決するのですか?

できました。(更新/改良版)

  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();
  });