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

Question

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.

Please add the code from the test file. – Clarity Jul 25 '19 at 08:49 — Clarity, Jul 25 '19 at 08:49

score 2 · Accepted Answer · answered Jul 25 '19 at 08:58

2

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

answered Jul 25 '19 at 08:58

Tien Duong

2,455
1
7
26

can we do the same for **blur**? `searchBox.blur();` – aToz Jul 25 '19 at 10:16
Yes, we can. You can add blur function to mockUpObject – Tien Duong Jul 25 '19 at 10:17

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

1 Answers1