title: Unit testing custom React Hook with window resize event
body: <p>I'm trying to unit test a simple custom hook, <code>getWindowWidth()</code>, but I can not get the window in Enzyme to resize.</p>
  
  <p>I'm using enzyme to mount a component that uses the hook, setting the width of the window object, forcing a re-render, yet the window width never changes.</p>
  
  <p>Here is the hook:  </p>
  
  <pre><code>import { useState, useEffect } from 'react';
  
  export default function getWindowWidth() {
    const [width, setWidth] = useState(window.innerWidth);
  
    useEffect(() =&gt; {
      const handleResize = () =&gt; setWidth(window.innerWidth);
      window.addEventListener('resize', handleResize);
      return () =&gt; {
        window.removeEventListener('resize', handleResize);
      };
    });
  
    return width;
  }
  </code></pre>
  
  <p>and here is my test: </p>
  
  <pre><code>import React from 'react';
  import { mount } from 'enzyme';
  import getWindowWidth from './getWindowWidth';
  
  // simulate window resize
  function fireResize(width) {
    window.innerWidth = width;
    window.dispatchEvent(new Event('resize'))
  }
  // Test component that uses the Hook
  function EffecfulComponent() {
    const viewport = getWindowWidth()
    return &lt;span&gt;{viewport}&lt;/span&gt;
  }
  
  test('should show updated window width', () =&gt; {
    const wrapper = mount(&lt;EffecfulComponent /&gt;)
    expect(wrapper.text()).toEqual('1024');
    fireResize(320);
    wrapper.update();
    expect(wrapper.text()).toEqual('320');
  });
  </code></pre>
  
  <p>I expected the window to resize to 320, but it stays at 1024 (the default).</p>