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

Question

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

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

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

const val = input.node.value;

//val is ''

这里的所有解决方案似乎都不起作用..

Answer 1

要真正了解代码中发生的情况,查看组件代码(特别是onChange处理程序)会很有用.

但是,关于以下代码:

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

这实际上不会改变<input />元素的值,而只是使您的onChange函数运行并提供一个看起来像的事件对象{target: {value: 'abc'}}.

我们的想法是你的onChange函数会更新你的状态或存储,所以触发这个函数应该会导致你的DOM被更新.如果你实际上没有使用onChange定义的处理程序input.simulate('change')将不会做任何事情.

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

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()可以像.node在酶2中一样使用，也可以.instance()在酶3中使用。