酶 - 如何访问和设置<input>值？

Question

我对使用<input>时如何获取价值感到困惑mount.以下是我的测试结果:

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

控制台打印出来undefined.但是,如果我稍微修改代码,它的工作原理:

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

当然,除了input.simulate我现在使用之外,这条线路都失败render了.我需要两个都正常工作.我该如何解决？

编辑:

我应该提一下,<EditableText />不是一个受控组件.但是当我defaultValue进入时<input />,它似乎设定了价值.上面的第二个代码块会打印出值,同样如果我在Chrome中检查输入元素并输入$0.value控制台,它会显示预期值.

Answer 1

我想你想要的是:

input.simulate('change', { target: { value: 'Hello' } })

这是我的来源.

您不应该在render()任何地方使用来设置值.只是仅供参考,你使用的是两种不同render()的.你的第一个代码块中的那个是来自Enzyme,并且是一个关于包装器对象的方法mount并且find给你.第二个,虽然它不是100%清晰,但可能就是那个react-dom.如果你正在使用酶,只需使用shallow或mount酌情,不需要render来自react-dom.

Answer 2

使用Enzyme 3,如果您需要更改输入值但不需要触发该onChange功能,则可以执行此操作(node属性已被删除):

wrapper.find('input').instance().value = "foo";

如果你有一个支柱(例如,对于受控组件),你可以使用它wrapper.find('input').simulate("change", { target: { value: "foo" }})来调用onChange.

Answer 3

得到它了.(更新/改进版)

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

Answer 4

这里有很多不同的意见。唯一对我有用的是上述所有内容，而没有使用input.props().value。希望对您有所帮助。

Answer 5

我正在使用 React 和 TypeScript，以下内容对我有用

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

直接设置值

wrapper.find('input').instance().value = 'Hello'` 

导致我收到编译警告。