Testing input.focus() in Enzyme

Question

How do I test input.focus() in enzyme. I am writing the script with react. My code is below:

public inputBox: any;  componentDidUpdate = () => {     setTimeout(() => {         this.inputBox.focus();     }, 200); }  render() {     return (         <div>             <input                 type = 'number'                 ref = {element => this.inputBox = element } />         </div>     ); } 

Answer 1

You can use mount instead of shallow. Then you can compare document.activeElement and the input DOM node for equality.

const output = mount(<MyFocusingComponent/>);  assert(output.find('input').node === document.activeElement); 

See https://github.com/airbnb/enzyme/issues/316 for more details.

Answer 2

Per React 16.3 updates... using createRef for anyone visiting this post today, if you rearrange the original component to use the new ref api

class InputBox extends PureComponent {     constructor(props) {         super(props);         this.inputRef = React.createRef();     }     componentDidMount() {         this.inputRef.current.focus();     }     render() {         return (             <input                 ref={this.inputRef}             />         );     } } 

Then in your test spec

it("Gives immediate focus on to name field on load", () => {     const wrapper = mount(<InputBox />);     const { inputRef } = wrapper.instance();      jest.spyOn(inputRef.current, "focus");      wrapper.instance().componentDidMount();     expect(inputRef.current.focus).toHaveBeenCalledTimes(1); }); 

Notice the use of the inputRef.current attribute which references the currently assigned DOM node.