Question

如何设置文本输入的文本，然后使用React / Enzyme测试它的值？

const input = wrapper.find('#my-input');

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

const val = input.node.value;

//val is ''

所有solutions here似乎都不起作用..

Answer 1

要真正了解代码中发生的情况，查看组件代码（特别是您的onChange处理程序）会很有用。

但是，关于以下代码：

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

这实际上不会改变<input />元素的值，而只会导致您运行onChange函数并提供一个类似于{target: {value: 'abc'}}的事件对象

我们的想法是你的onChange函数会更新你的状态或商店，因此触发这个函数会导致你的DOM被更新。如果您实际上没有使用onChange定义input.simulate('change')处理程序，则不会做任何事情。

因此，如果您的目标是实际设置输入的值而不是触发onChange处理程序，那么您可以使用JS来使用类似wrapper.find('#my-input').node.value = 'abc';之类的东西手动更新DOM，但是这样可以绕过React＆＃39;渲染周期，如果你做任何事情来触发重新渲染，你可能会看到这个值被清除/删除。

Answer 2

我在这里使用React 16和Enzyme 3.10这对我来说完全有效（在尝试了太多不同的建议之后）：

wrapper.find("input").instance().value = "abc";

显然，在以前的版本中，您可以使用node或getNode()代替instance()，这是我之前许多尝试的一部分。

Answer 3

这适用于酶3和酶2：

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

.getDOMNode()可以像酶2中的.node一样使用，就像酶3中的.instance()一样。

Answer 4

如果使用TypeScript，则可以执行以下操作

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

Answer 5

这里对我有用。

我更改了输入文本，并更新了值。然后更新我的DOM属性。

.update()

更新后，我正在使用输入的手机号码长度用例检查按钮禁用属性。

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)

使用React和Enzyme测试设置文本值

5 个答案: