Mocking issue for getBoundingClientRect

How to mock this line of code. I have a config (i.e mockConfig) with host property of any type. But it has html element. So that I can use querySelector and getBoundingClientRect methods. but I couldn't able to mock getBoundingClientRect.

//this.config.host='<div><i class="icon-dropdown"></i></div>'
..
const arrowHostLoc = (this.config.host as HTMLElement).querySelector('.icon-dropdown').getBoundingClientRect();

Code I'm using

  const mockConfig = {
    contentType: TestComponent,
    contentConfig: contentConfig,
    cssClass: 'rainbow',
    alignment: 'center',
    topPadding: 5,
    scrollListener: scrollSubject.asObservable(),
    host: { //type of any
      getBoundingClientRect: hostGetBoundClientRectSpy
    }
  } as IPopoverConfig;

--------------------

describe('xxx',()=>{
...
mockConfig.host = document.createElement('div');
spyOn('mockConfig.host.querySelector',['getBoundingClientRect']).and.returnValue(new DOMRect(0,0,0,0));
});

But i'm getting error as TypeError: Cannot read property 'getBoundingClientRect' of null.

What am i doing wrong?

from Mocking issue for getBoundingClientRect