Enzyme에서 ​​input.focus() 테스트

Question

효소에서 input.focus()를 테스트 할 수있는 사람이 누구든지 도와 줄 수 있습니까? react.My 코드가있는 스크립트를 작성하고 있습니다.

public inputBox: any; 

componentDidUpdate =() => { 
    setTimeout(() => { 
     this.inputBox.focus(); 
    }, 200); 
} 

render() { 
    return (
     <div> 
      <input 
       type = 'number' 
       ref = {element => this.inputBox = element } /> 
     </div> 
    ); 
} 

Answer 1

다른 방법은 요소가 포커스를 얻었는지 테스트하는 것입니다. 즉, 노드 요소에 focus()이 호출됩니다. 이 집중 요소를 달성하려면 예를 들어 ref 태그를 통해 참조해야합니다. 참조는 this.inputBox으로 지정되었습니다. 아래의 예를 생각해 보면 어떤 스파이 당신이 좋아하는 수 있지만

const wrapper = mount(<FocusingInput />); 
const element = wrapper.instance().inputBox; // This is your input ref 

spyOn(element, 'focus'); 

wrapper.simulate('mouseEnter', eventStub()); 

setTimeout(() => expect(element.focus).toHaveBeenCalled(), 250); 

이 예 것은, 재스민의 spyOn 사용합니다.

Answer 2

얕은 대신 mount을 사용할 수 있습니다. 그러면 document.activeElement과 입력 DOM 노드가 동일한 지 비교할 수 있습니다.

const output = mount(<MyFocusingComponent/>); 

assert(output.find('input').node === document.activeElement); 

자세한 내용은 https://github.com/airbnb/enzyme/issues/316을 참조하십시오.