我对使用<input>
时如何获取价值感到困惑mount
。这是我的测试内容:
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中检查了输入元素并$0.value
在控制台中键入,它将显示期望的值。
得到它了。(更新/改进版本)
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();
});
好奇这对您如何运作。我们正在使用PhantomJS,
mount()
并且没有将组件插入DOM。因此,他们无法获得关注。我们必须添加一个DOM元素,并使用context
选项mount()
@ Pre101我实际上开始使用Jest而不是Enzyme。强烈推荐!
@ffxsam:input.get(0).value始终显示“未定义”
@Siddharth_Vyas尝试
input.prop('value')