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

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

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

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

const val = input.node.value;

//val is ''

---

所有这些似乎都不起作用。

要真正了解代码中发生了什么，查看组件代码（特别是

onChange

处理程序）会很有用

但是，关于以下代码：

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

这实际上不会更改

元素的值，而是会导致运行

onChange

函数，并提供一个类似于

{target:{value:'abc'}

的事件对象

这个想法是，您的

onChange

函数将更新您的状态或存储，因此触发此函数将导致您的DOM更新。如果您没有使用

input定义
onChange
处理程序，那么模拟（'change'）

将不会执行任何操作

---

因此，如果您的目标是实际设置输入的值，而不是触发

onChange

处理程序，那么您可以使用JS使用类似

wrapper.find（“#我的输入”）的东西手动更新DOM.node.value='abc'；

但是这绕过了React的渲染周期，如果您采取任何措施触发重新渲染，您可能会看到此值被清除/删除。

我在这里使用的是

React 16

和

Ezyme 3.10

，这对我完全有效（在尝试了太多不同的建议之后）：

---

显然，在以前的版本中，您可以使用

node

或

getNode（）

而不是

instance（）

，这是我以前多次尝试的一部分。

这对酶3和酶2都有效：

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

.getDOMNode（）

可以像酶2中的

.node

一样使用，像酶3中的

.instance（）

一样使用。

这里它对我有用

我已经更改了输入文本，并进行了值更新。 和更新我的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)

---

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

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

wrapper.find（'input'）.getDOMNode（）.value='newvalue'；
find（'input'）.simulate（'change'）；

您似乎需要使用

mount

才能使其正常工作。我正在尝试使用

input.node.value=“Test”设置该值，可能存在重复

，我收到了这个错误

类型错误：无法添加属性值，对象不可扩展

。有什么想法吗？@jhamm请查看下面的答案。您可能需要删除目标/值：input.simulate（'changeText'，'6'））；我还遇到了以下问题：TypeError:无法添加属性值，对象不可扩展。为我解决此问题的方法是更改

node.find（''id_name'）.get（0）。value=

到

node.find（''id_name'）.instance（）。value=

我使用了

.node

，但Ezyme告诉我使用

getElement（）

但这给了我react元素，而不是dom元素。Thx用于共享

实例（）

函数。

typescript

失败，出现错误：

TS2339:类型组件上不存在属性值

。您能帮忙吗？@user2133404抱歉，伙计……但我不知道如何解决这个问题，因为我以前从未使用过typescript。typescript需要知道您具体处理的元素类型。在这种情况下，

wrapper.find（“input”）.instance（）.value=“abc”

会起作用。Enzyme 3.3.x

wrapper.getDOMNode不是一个函数

。看起来它只是用于

mount

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