title: ResizeObserver API testing jest
body: <p>I tried to test the hook, that used the <code>ResizeObserver</code>. Also, I need to check if the element was overflow or wasn't after resizing. So I wrote such a decision:</p>
  <pre class="lang-js prettyprint-override"><code>import { useLayoutEffect, useState } from 'react';
  import ResizeObserver from 'resize-observer-polyfill';
  
  export default function useOverflowCheck(ref) {
    const [isOverflowing, setIsOverflowing] = useState(false);
  
    const isOverflow = current =&gt; {
      if (current) {
        const hasOverflowX = current.offsetWidth &lt; current.scrollWidth;
        const hasOverflowY = current.offsetHeight &lt; current.scrollHeight;
  
        setIsOverflowing(hasOverflowX || hasOverflowY);
      }
    };
  
    // eslint-disable-next-line react-hooks/exhaustive-deps
    useLayoutEffect(() =&gt; {
      const element = ref.current;
  
      const resizeObserver = new ResizeObserver(entries =&gt; {
        entries &amp;&amp; entries.length &amp;&amp; isOverflow(entries[0].target);
      });
  
      if (element) {
        resizeObserver.observe(element);
        return () =&gt; {
          resizeObserver.disconnect();
        };
      }
    });
  
    return isOverflowing;
  }
  </code></pre>
  <p>And I tried to unit test this code, but my tests didn't cover the <code>resizeObserver</code> callback.
  Test:</p>
  <pre class="lang-js prettyprint-override"><code>import { renderHook } from '@testing-library/react-hooks';
  import useOverflowCheck from './index';
  
  describe('useOverflowCheck', () =&gt; {
    it('should return true for an overflowing component', () =&gt; {
      const el: HTMLDivElement = document.createElement('div');
      Object.defineProperties(el, {
        offsetWidth: { value: 30, configurable: true },
        offsetHeight: { value: 30, configurable: true },
      });
  
      const ref = {
        current: el,
      };
  
      expect(renderHook(() =&gt; useOverflowCheck(ref)).result.current).toBeTruthy();
    });
  });
  </code></pre>