Getting 'NULL' Error While I Am Testing 'document.getElementByID' Line. I Already Tried AttachTo Approach But That Is Also Not Working

I am testing my react function using jest. While I am testing I am getting error focus of null for document.getElementById line.

I already tried this solution. jest + enzyme, using mount(), document.getElementById() returns null on component which appear after _method call But this is not working for me.

this is my abc.js

clearSearch = () => {
        const { typeSearchBox } = this.props;
        this.setState({ searchPlaceholderValue: PROMPTRAISED });
        this.setState({ searchValue: '' });
        this.setState({ showClearIcon: false });
        const searchBox = document.getElementById(`SearchBox_${typeSearchBox}`);
        searchBox.focus();
    };

this is my abc.test.js

it('+++ inputs valid filtered search text', () => {
     categoryWrapper.find('ClearIcon').prop('onClick')();
});

on click of clearIcon clearseach is trigger.

You need to mock document.getElementById function to return an object with focus function in your test file.

const mockUpObject = {
  focus: () => null,
};
global.document.getElementById = jest.fn(() => mockUpObject);