ฉันสับสนเกี่ยวกับวิธีการเข้าถึงคุ้มค่าเมื่อใช้<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
ในคอนโซลก็จะแสดงค่าที่คาดไว้
input.render()
ไม่ได้react-dom
ทำให้ นี่คือ: airbnb.io/enzyme/docs/api/ShallowWrapper/render.html