React - Jest - Enzyme: How to mock ref properties

Question

I\'m writing test for a component with ref. I\'d like to mock the ref element and change some properties but have no idea how to. Any suggestions?

// MyComp.         


        

Answer 1

You can mock the ref by using Object.defineProperty

`Object.defineProperty(Element.prototype, 'offsetHeight', {
   value: 100,
   writable: true,
   configurable: true
});`

Answer 2

So here's the solution, according to discussion in https://github.com/airbnb/enzyme/issues/1937

It is possible to monkey-patch the class with a non-arrow function, where "this" keyword is passed to the right scope.

function mockGetRef(ref:any) {
  this.contentRef = {offsetHeight: 100}
}
jest.spyOn(MyComp.prototype, 'getRef').mockImplementationOnce(mockGetRef);
const comp = mount(<MyComp />);
expect(comp.state('contentHeight')).toEqual(100);