svgElement.getBoundingClientRect() always returns zeros while testing with nodejs

Question

I created some svg element and want to determine its size with

svgElement.getBoundingClientRect()

My code works if the svgElement is appended to the document with

document.body.appendChild(svgElement)

and if I run the code in the browser (google chrome).

However, while testing with nodejs and jest, the width and the height of the resulting bounding rect are always zero.

=>What can I do to correctly run the code with nodejs?

Answer 1

Nodejs uses jsdom and getBoundingClientRect is only implemented to return the right properties, but not the right values.

Also see https://github.com/jsdom/jsdom/issues/653

For the tests the method getBoundingClientRect should be mocked, for example with:

spyOn(svgElement,'getBoundingClientRect').and.returnValue({
    width: 10,
    height: 10,
    top: 0,
    left: 0,
    right: 10,
    bottom: 10
});