을 사용할 <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.simulate('change', { target: { value: 'Hello' } })
여기 내 소스 입니다.
render()값을 설정 하기 위해 아무 곳이나 사용할 필요가 없습니다 . 그리고 참고로, 당신은 두 개의 다른 것을 사용하고 있습니다 render(). 첫 번째 코드 블록의 하나는 Enzyme에서 가져온 것으로 래퍼 개체에 대한 메서드 mount이며 find제공합니다. 두 번째는 100 % 명확하지는 않지만 아마도 react-dom. Enzyme을 사용하는 경우 shallow또는 mount적절하게 사용하고 renderfrom을 사용할 필요가 없습니다 react-dom.
답변
로 효소 3 당신이 입력 값을 변경해야하지만 않으면 해고 할 필요가 없습니다 onChange그냥 (이 작업을 수행 할 수있는 기능 node속성이 제거되었습니다 )
wrapper.find('input').instance().value = "foo";
(즉, 제어 된 구성 요소에 대한) 소품이있는 경우 wrapper.find('input').simulate("change", { target: { value: "foo" }})호출 하는 데 사용할 수 있습니다 onChange.
답변
알았다. (업데이트 / 개선 버전)
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();
});
답변
여기에 많은 다른 의견이 있습니다. 나를 위해 일한 유일한 것은 위의 어느 것도 사용하지 않고 input.props().value. 도움이 되었기를 바랍니다.
답변
기본적으로 jest 및 효소 2.7.0과 함께 제공되는 create-react-app을 사용하고 있습니다.
이것은 나를 위해 일했습니다.
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();
답변
위의 어느 것도 나를 위해 일하지 않았습니다. 이것이 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);
답변
TypeScript와 함께 반응을 사용하고 있으며 다음이 나를 위해 일했습니다.
wrapper.find('input').getDOMNode<HTMLInputElement>().value = 'Hello';
wrapper.find('input').simulate('change');
값을 직접 설정
wrapper.find('input').instance().value = 'Hello'`
나에게 컴파일 경고를 일으켰습니다.
