酶-如何访问和设置 < 输入 > 值？

在使用 mount时，我对如何访问 <input>值感到困惑:

  it('cancels changes when user presses esc', done => {
const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input');


console.log(input.render().attr('value'));
input.simulate('focus');
done();
});

控制台打印出 undefined。但是如果我稍微修改一下代码，它就可以工作了:

  it('cancels changes when user presses esc', done => {
const wrapper = render(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input');


console.log(input.val());
input.simulate('focus');
done();
});

当然，除了 input.simulate线失败，因为我现在使用的是 render。我需要两者都能正常工作。我该怎么补救？

编辑:

值得一提的是，<EditableText />不是受控组件。但是当我将 defaultValue传递给 <input />时，它似乎设置了值。上面的第二个代码块确实打印出了值，同样，如果我检查 Chrome 中的 input 元素并在控制台中键入 $0.value，它会显示预期值。

167146 次浏览
小开
最佳答案

知道了

  it('cancels changes when user presses esc', done => {
const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input');


input.simulate('focus');
input.simulate('change', { target: { value: 'Changed' } });
input.simulate('keyDown', {
which: 27,
target: {
blur() {
// Needed since <EditableText /> calls target.blur()
input.simulate('blur');
},
},
});
expect(input.get(0).value).to.equal('Hello');


done();
});
小开

I think what you want is:

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

这是我的消息来源。

您不需要在任何地方使用 render()来设置值。仅供参考，你使用的是两种不同的 render()。第一个代码块中的代码来自 Enzyme，它是包装器对象 mount和 find上的一个方法。第二个，虽然不是100% 清楚，可能是来自 react-dom的。如果你使用酶，只要使用 shallow或 mount作为适当的，没有必要从 react-dom的 render。

小开

在我的案例中，我使用了裁判回调,

  <input id="usuario" className="form-control" placeholder="Usuario"
name="usuario" type="usuario"
onKeyUp={this._validateMail.bind(this)}
onChange={()=> this._validateMail()}
ref={(val) =>{ this._username = val}}
>

获取值。 所以酵素不会改变 this. _ 用户名的值。

所以我不得不:

login.node._username.value = "mario@com.com";
user.simulate('change');
expect(login.state('mailValid')).toBe(true);

为了能够设置值，然后调用 change，然后断言。

小开

This works for me using enzyme 2.4.1:

const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input');


console.log(input.node.value);
小开

I am using create-react-app which comes with jest by default and enzyme 2.7.0.

这对我很有效:

const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input')[index]; // where index is the position of the input field of interest
input.node.value = 'Change';
input.simulate('change', input);
done();
小开

对于 酶3，如果你需要改变一个输入值，但是不需要触发 onChange函数，你可以这样做(node属性 has been removed) :

Find (‘ input’) . instance () . value = “ foo”;

如果您有一个用于调用 onChange的道具(例如，用于受控组件) ，那么可以使用 wrapper.find('input').simulate("change", { target: { value: "foo" }})来调用 onChange。

小开

这里有很多不同的观点。唯一对我有效的方法就是使用 input.props().value。希望能帮上忙。

小开

None of the above worked for me. This is what worked for me on Enzyme ^3.1.1:

input.instance().props.onChange(({ target: { value: '19:00' } }));

以下是代码的其余部分:

const fakeHandleChangeValues = jest.fn();
const fakeErrors = {
errors: [{
timePeriod: opHoursData[0].timePeriod,
values: [{
errorIndex: 2,
errorTime: '19:00',
}],
}],
state: true,
};
const wrapper = mount(<AccessibleUI
handleChangeValues={fakeHandleChangeValues}
opHoursData={opHoursData}
translations={translationsForRendering}
/>);
const input = wrapper.find('#input-2').at(0);
input.instance().props.onChange(({ target: { value: '19:00' } }));
expect(wrapper.state().error).toEqual(fakeErrors);
小开

我使用 Wrapper 的 setValue [ https://vue-test-utils.vuejs.org/api/wrapper/#setvalue-value]方法来设置值。

inputA = wrapper.findAll('input').at(0)
inputA.setValue('123456')
小开

.simulate() doesn't work for me somehow, I got it working with just accessing the node.value without needing to call .simulate(); in your case:

const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input').at(0);


// Get the value
console.log(input.node.value); // Hello


// Set the value
input.node.value = 'new value';


// Get the value
console.log(input.node.value); // new value

希望这对其他人有所帮助！

小开

这是我的密码。

const input = MobileNumberComponent.find('input')
// when
input.props().onChange({target: {
id: 'mobile-no',
value: '1234567900'
}});
MobileNumberComponent.update()
const Footer = (loginComponent.find('Footer'))
expect(Footer.find('Buttons').props().disabled).equals(false)

我已经用 componentname.update()更新了 DOM 然后检查长度为10位的提交按钮验证(禁用/启用)。

小开

This worked for me: 

let wrapped = mount(<Component />);
expect(wrapped.find("input").get(0).props.value).toEqual("something");
小开

如果有人正在苦苦挣扎，我发现以下方法对我很有效

const wrapper = mount(<NewTask {...props} />); // component under test
const textField = wrapper.find(TextField);


textField.props().onChange({ target: { value: 'New Task 2' } })
textField.simulate('change');
// wrapper.update() didn't work for me, need to find element again


console.log(wrapper.find(TextField).props()); // New Task 2

似乎您需要首先定义在变更事件中发生了什么，然后模拟它(而不是用数据模拟变更事件)

小开

我使用的反应与 TypeScript 和以下工作为我

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

Setting the value directly

wrapper.find('input').instance().value = 'Hello'`

导致了编译警告。

小开

我用一种非常简单的方法解决了:

  1. 设置 props 的值:
  const wrapper: ShallowWrapper = shallow(<ProfileViewClass name: 'Sample Name' />);
  1. HTML 代码 :
  <input type='text' defaultValue={props.name} className='edituser-name' />
  1. 从 wrapper.find(element).props().attribute-name访问属性 :
  it('should render user name', () => {
expect(wrapper.find('.edituser-name').props().defaultValue).toContain(props.name);
});

干杯

小开

上面的解决方案对我都不起作用，因为我使用的是 Formik，我需要在改变字段值的同时标记字段“已接触”。遵循代码对我来说很管用。

const emailField = orderPageWrapper.find('input[name="email"]')


emailField.simulate('focus')
emailField.simulate('change', { target: { value: 'test@example.com', name: 'email' } })
emailField.simulate('blur')

提交答案