Test input.focus() in Enzima

Question

Qualcuno può aiutarmi a testare input.focus() in enzima. Sto scrivendo lo script con react.Il mio codice è sotto.

public inputBox: any; 

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

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

Answer 1

Un altro approccio è verificare se l'elemento acquisisce la messa a fuoco, ovvero focus() viene chiamato sull'elemento nodo. Per ottenere questo elemento focalizzato, è necessario fare riferimento al tag ref come nel tuo esempio: il riferimento è stato assegnato a this.inputBox. Considerate esempio qui sotto:

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); 

Questo esempio utilizza Jasmine spyOn, anche se è possibile qualsiasi spia Ti piacerebbe.

Answer 2

È possibile utilizzare mount anziché basso. Quindi è possibile confrontare document.activeElement e il nodo DOM di input per l'uguaglianza.

const output = mount(<MyFocusingComponent/>); 

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

Vedere https://github.com/airbnb/enzyme/issues/316 per ulteriori dettagli.