Dom Manipulation (AppendChild) fails in Jest

Question

I need some help in below test case : appenChild failing in Jest

updatePopupContent(data) {
    const sectionFragment = new DocumentFragment();
    //create section return HTML element as per data passed
    data.costSection && sectionFragment.appendChild(this.createSection(data.costSection));// test fails here
    this.dom.content.appendChild(sectionFragment);
}

describe('test functionality', () => {
            const data = {
                costSection: {
                    price: "10 USD"
                }
            }
            it("should create subsections ", () => {
                context.createSection = jest.fn().mockImplementation(() => {
                    const section = document.createElement("div");
                    section.innerHTML = "Test Section";
                    return section;
                })
                context.updatePopupContent(data); // throwing error : TypeError: Cannot read property 'adoptNode' of undefined
                expect(context.createSection).toHaveBeenCalledTimes(1);
            })

Actually this is an issue with JSDOM : https://github.com/jsdom/jsdom/issues/2274 What changes I need to make in test to get the error resolved.

Thanks

Answer 1

So if I understand correctly, commit f9dc6271a8ed557d7557967b87b51bed42a4d932 provides a fix for issue you've faced. And seems to be included into JSDom 16.0.0 release .

All you need to do is to update your jest , so its jest-environment-jsdom points at least to jsdom 16.0.0 . Based on history for its package.json you need at least 26.0.1