title: React Hooks ref.current is undefined during test
body: <p>TLDR - I have a responsive component using ref.current.offsetWidth but it doesn't work when I test it with Jest</p>
  <p>The navbar component works and renders fine in localhost. But when I'm trying to stimulate different screen widths using Jest for unit testing, the ref hook is unable to pick up div length for some reason. Any suggestion on how to fix this?</p>
  <p>Error: <code> TypeError: Cannot read property 'offsetWidth' of undefined</code></p>
  <p>Code: Navbar.js</p>
  <pre><code>// custom hook to get live div width 
  const useContainerDimensions = myRef =&gt; {
    const getDimensions = () =&gt; ({
      width: myRef.current.offsetWidth,            //location of error
    });
  
    const [dimensions, setDimensions] = useState({ width: 0 });
  
    useEffect(() =&gt; {
      const handleResize = () =&gt; {
        setDimensions(getDimensions());
      };
      if (myRef.current) {
        setDimensions(getDimensions());
      }
  
      window.addEventListener('resize', handleResize);
  
      return () =&gt; {
        window.removeEventListener('resize', handleResize);
      };
    }, [myRef]);
  
    return dimensions;
  };
  
  const Navbar = () =&gt; {
    const inputRef = useRef();
    const { width } = useContainerDimensions(inputRef);
  
    useEffect(() =&gt; {
      if (width &gt;= 890) {
        setCurrTabPerRow(5);
        setTabStyle('5 tabs');
      }
      if (width &lt; 890) {
        setCurrTabPerRow(4);
        setTabStyle('4 tabs');
      }
    }, [width]);
  
    return (
      ... 
      &lt;div ref={inputRef}&gt;
        //...stuff
      &lt;/div&gt;
      ...
    )
  }
  
  export default Navbar;
  
  </code></pre>
  <p>navbar.test.js</p>
  <pre><code>const resizeWindow = (x, y) =&gt; {
    window.innerWidth = x;
    window.innerHeight = y;
    window.dispatchEvent(new Event('resize'));
  }
  
  describe('Navbar component', () =&gt; {
    it('should render', () =&gt; {
      const component = mount(
        &lt;Navbar filter&gt;
          &lt;Navbar.Tab id=&quot;stuff1&quot; /&gt;
          &lt;Navbar.Tab id=&quot;stuff2&quot; /&gt;
          &lt;Navbar.Tab id=&quot;stuff3&quot; /&gt;
        &lt;/Navbar&gt;
      );
      act(() =&gt; {
        resizeWindow(500, 300);
      });
      expect(component).toMatchSnapshot();
    });
  });
  </code></pre>