无法在 Enzyme 中设置输入元素值答案

【问题标题】：Can't set input element value in Enzyme无法在 Enzyme 中设置输入元素值
【发布时间】：2026-01-26 02:25:01
【问题描述】：

在我的测试中，我有这个：

let fromInput = wrapper.find('#starting-address').getElement();
fromInput.value = 'Foo';

但是，我收到一个错误：

TypeError：无法添加属性值，对象不可扩展。

我正在尝试测试我拥有的按钮，单击该按钮应清除输入元素的值（id：'starting-address'）。我打算在模拟点击之前断言fromInput.value === 'foo'，在点击之后断言fromImput.value === ''。

【问题讨论】：

你是mounted 还是shallow 渲染了组件？
我正在使用mount

标签： javascript testing enzyme

【解决方案1】：

您需要改用instance()：

const formInput = wrapper.find('#starting-address').instance();
formInput.value = 'Foo';

查看this answer，了解更多详情。

【讨论】：

文档说它只能在也是根实例的包装器实例上调用？
我认为这是shallow() 的b/c（如他们的例子）。如果你这样做mount() - 我看不出不使用它的原因。

【解决方案2】：

这对我有用：

it("Successfully add an employee to the employees' list when the form submitted",function(){
   const wrapper = mount(<App/>);
   const addEmpWapper = wrapper.find('AddEmployee');
   addEmpWapper.find("#txtName").getDOMNode().value = "Youki";
   addEmpWapper.find("#txtImgUrl").getDOMNode().value = "ImageUrl1";
   addEmpWapper.find("#txtDesc").getDOMNode().value = "Cute baby.";

   const form = addEmpWapper.find('form');
   form.simulate("submit");
   // I already had 3 employees in the app's states bag.
   expect(wrapper.state().employees).to.have.lengthOf(4);
 });

【讨论】：