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

Question

我对使用 mount 时如何访问 <input> 值感到困惑。这是我的测试：

   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 ，它会显示预期值。

原文由 ffxsam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

知道了。 （更新/改进版本）

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

原文由 ffxsam 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我想你想要的是：

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

这是我的消息来源。

您不需要在任何地方使用 render() 来设置值。仅供参考，您使用的是两个不同的 render() 的。您的第一个代码块中的那个来自 Enzyme，并且是包装对象上的一个方法 mount 和 find 给你。第二个，虽然不是 100% 清楚，但可能是来自 react-dom 的那个。 If you’re using Enzyme, just use shallow or mount as appropriate and there’s no need for render from react-dom .

原文由 Tyler Collier 发布，翻译遵循 CC BY-SA 3.0 许可协议