Error: clientWidth is not declared configurable in http://localhost:9877node_modules/jasmine-core/lib/jasmine-core/jasmine.js (line 4410)

Question

I am trying to mock ElementRef properties while unit testing my angular component and it give me the below error

Error: clientWidth is not declared configurable in http://localhost:9877node_modules/jasmine-core/lib/jasmine-core/jasmine.js (line 4410)

I am getting the error when try to mock the property of native element of an element as below

const div = fixture.debugElement.query(By.css('.ellipsis-overflow'));
div.triggerEventHandler('mouseover', null);
fixture.detectChanges();
expect(component.tooltip.isOpen()).toBeFalsy();
spyOnProperty(div.nativeElement, 'clientWidth', 'get').and.returnValue(1400);
spyOnProperty(div.nativeElement, 'scrollWidth', 'get').and.returnValue(2400);

spyOnProperty is creating that error.

Answer 1

clientWidth and scrollWidth are readonly properties of javascript and Its not possible to set value using SpyOn . So you need to use other way by calling other part of the application to set these kind of read only properties.