getting 'NULL' error while I am testing 'document.getElementByID' line. I already tried attachTo approach but that is also not working

0
votes

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.

1
reactjsjestjsenzymejsdom
Please add the code from the test file. – Clarity

1 Answers

1
votes

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