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

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

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

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

const val = input.node.value;

//val is ''

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

1> Levi..：

---

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

但是,关于以下代码:

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

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

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

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

---

我试图用`input.node.value ="Test"`来设置值,我得到这个错误`TypeError:无法添加属性值,对象不可扩展`.有任何想法吗？

2> leandroico..：

---

我使用的是React 16和Enzyme 3.10在这里,这对我来说完全工作(想太多不同意见那里后):

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

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

---

`typescript`失败并出现错误:`TS2339:类型Component <{},{}>`上不存在属性值.你能帮忙吗？

---

@ user2133404对不起,伙计......但我不知道如何解决这个问题,因为我以前从未使用过Typescript.

3> Eran Shabi..：

---

这适用于酶3和酶2：

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

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