reactjsmocha.jschaikarma-mochareactjs-testutils

Writing React TestUtils test case for function without parameters


So I have a function to remove all tabbing from a particular page. There is a variable declared in this function that does the work. I need to pass dummy value to this variable so that the value will pass and function executes.

How do I write test case using ReactJS TestUtils for the following.

_removeAllTabbing() {
const accordionTitleAnchors = [
    document.getElementById('accordion-panel-1').firstChild,
    document.getElementById('accordion-panel-2').firstChild,
    document.getElementById('accordion-panel-3').firstChild,
    document.getElementById('accordion-panel-4').firstChild,
    document.getElementById('accordion-panel-5').firstChild
];

_.each(accordionTitleAnchors, accordionTitleAnchor => {
    this._removeTabbing(accordionTitleAnchor);
});

}

So far I have this

xit('should call _removeAllTabbing function', () => {
    const educate = new EducateAccordion();
    const accordionTitleAnchors = TestUtils.scryRenderedDOMComponentsWithClass(this.component, 'panel-title');;

    educate._removeAllTabbing(accordionTitleAnchors);
});

Also, it will be great if anyone can share some docs/articles for testing different front end scenarios.


Solution

  • So renderIntoDocument didn't work. :( wonder why?

    Here is the code that works for me.

    it('should validate _removeAllTabbing function', () => {
            const educate = new EducateAccordion();
            const activeKey = 1;
    
            const dummyElement = document.createElement('div');
    
            for (let i = 1; i <= 5; i++) {
                const temp = document.createElement('div');
    
                temp.setAttribute('id', 'accordion-panel-' + i);
    
                const temp2 = document.createElement('div');
    
                temp2.setAttribute('class', 'panel-title');
                temp2.setAttribute('role', 'tablist');
    
                temp.appendChild(temp2);
                dummyElement.appendChild(temp);
            }
    
            document.body.appendChild(dummyElement);
    
            educate._removeAllTabbing();
    
            this.accordionDummy = ReactDOM.findDOMNode(dummyElement);
    
            this.accordionTitleAnchors = this.accordionDummy.getElementsByClassName('panel-title');
    
            _.each(this.accordionTitleAnchors, (item) => {
                expect(item.getAttribute('tabIndex')).to.equal('-1');
            });
        });
    

    Need to figure out ways to test navigation portion of the application front-end