Testing input.focus() in Enzyme

reactjs typescript enzyme
Sachin picture Sachin · Jun 8, 2016 · Viewed 26k times · Source

Can anyone help me to 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

whatknight picture whatknight · Jul 15, 2016

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.

Related questions

Testing React Functional Component with Hooks using Jest

So I'm moving away from class based components to functional components but am stuck while writing test with jest/enzyme for the methods inside the functional components which explicitly uses hooks. Here is the stripped down version of my code. …

Read More
How do you test router match params with jest and enzyme?

Say I have the following component which I grabbed from https://www.codeday.top/2017/11/08/56644.html. Here I am using match.params to access the id. How would I write a unit test for this component tests the presence of the …

Read More
How to mock useHistory hook in jest?

I am using UseHistory hook in react router v5.1.2 with typescript? When running unit test, I have got issue. TypeError: Cannot read property 'history' of undefined. import { mount } from 'enzyme'; import React from 'react'; import {Action} from 'history'; import * as …

Read More