반응 테스트에서 입력 값을 변경하는 방법은 무엇입니까

Question

반응 애플리케이션 양식을 테스트하고 싶습니다.

다음 작업을 수행 할 때 버튼의 '비활성화 됨'속성을 제거했습니다.

const component = TestUtils.renderIntoDocument(<Mycomponent/>); 
const myDOM =findDOMNode(component); 
const input = myDOM.querySelector('input'); 
input.value = "2017-11-11"; 
let submitButton = myDOM.querySelector('button'); 
TestUtils.Simulate.click(submitButton); 
... 
const newlyAddedDate = record.querySelector('#date').innerHTML; 
console.log("newlyAddedDate:"+newlyAddedDate); 

하지만 콘솔의 출력은

"newlyAddedDate:" 

이 반응-응용 프로그램은 크롬에서 제대로 수행합니다. 내가이 문장은에서 InputBox의 값을 변경하는 데 실패

"input.value="2017-11-11"; 

의 문제 믿습니다.

그래서 어떻게 반응 테스트를 할 때 입력 상자에 값을 설정할 수 있습니까?

는 여기 완전히 당신이 테스트에 사용할 도서관에 따라 달라집니다, 그럼이 응용 프로그램 https://github.com/zzbslayer/ChargeAccount-React

Answer 1

의 REPO입니다. 여기에 모카와 효소 조합을 사용한 샘플이 있습니다.

beforeEach(() => { 
     _spies = {} 
     _props = { 
     propOne: 'somepropvalue', 
     ... 
     } 
     _wrapper = mount(<Your Component {..._props} />) 
    }) 



    it('Should change the input box',() => { 
     let promptInput = _wrapper.find('textarea') 

     promptInput.simulate('change', { target: { value : 'sample2' } }) 
    }) 

이전에는 모든 소품을 전달하여 구성 요소를 초기화했습니다. 그런 다음 테스트 내에서 해당 요소의 선택자 또는 HTML ID를 사용하여 래퍼 내부의 해당 텍스트 상자를 찾으십시오. 그런 다음 새 값으로 변경 이벤트를 시뮬레이트합니다.

Jest는 요즘 대부분의 반응 시작 부분 상용구에서 테스트를위한 기본 프레임 워크가되었습니다. 이 경우 개념은 동일하게 유지되지만 구문이 다릅니다.