reactjsjestjsreactjs-testutils

Change element size using Jest


I have following code in my component

var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();

I use d3js and render graph in the component. But when I run test there are any svg tags. I assume that it happens because all rect's fields equals 0.

Here is output for console.log(rect) in browser:

ClientRect {top: 89, right: 808, bottom: 689, left: 8, width: 800…}

and when I run test:

{ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }

So is there a way to set size of the element?


Solution

  • My solution is to mock getBoundingClientRect (I'm currently using jest 16.0.1)

    describe('Mock `getBoundingClientRect`', () => {
        beforeEach(() => {
            Element.prototype.getBoundingClientRect = jest.fn(() => {
                return {
                    width: 120,
                    height: 120,
                    top: 0,
                    left: 0,
                    bottom: 0,
                    right: 0,
                }
            });
        });
        it('should mock `getBoundingClientRect`', () => {
            const element = document.createElement('span');
            const rect = element.getBoundingClientRect();
            expect(rect.width).toEqual(120);
        });
    
    });