Testen von input.focus() in Enzym

Question

Kann mir jemand helfen, input.focus() in Enzym zu testen. Ich schreibe das Skript mit react.My Code ist unten.

public inputBox: any; 

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

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

Answer 1

Ein anderer Ansatz besteht darin, zu testen, ob Element den Fokus erhält, d. H. focus() wird am Knotenelement aufgerufen. Um dieses fokussierte Element zu erreichen, muss über ref ein Tag wie in Ihrem Beispiel referenziert werden - Referenz wurde this.inputBox zugewiesen. Betrachten Sie beispielsweise unter:

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

Dieses Beispiel verwendet Jasmins spyOn, wenn Du keinen Spion, die Sie mögen.

Answer 2

Sie können mount statt flach verwenden. Dann können Sie document.activeElement und den Eingabe-DOM-Knoten für Gleichheit vergleichen.

const output = mount(<MyFocusingComponent/>); 

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

Weitere Informationen finden Sie unter https://github.com/airbnb/enzyme/issues/316.