title: React Testing Library - Failing to test Window Resize React Hook
body: <p>I've created a custom React Hook for getting the viewport width &amp; height on window resize (the event is debounced). The hook works fine, but I've been unable to find a way to test with React Testing Library (I keep running into errors).</p>
  <p>I've recreated the app in CodeSandbox (along with the tests) to try to debug, but I'm running into different errors while testing.</p>
  <p>Sometimes I get:</p>
  <pre><code>Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'.`
  </code></pre>
  <p>But the general failures are that the data from the hook does not seem to be returned.</p>
  <pre><code>expect(received).toBe(expected) // Object.is equality
  
  Expected: 500
  Received: undefined
  </code></pre>
  <p>This could be something I'm missing with React Testing Library.</p>
  <p>Any help getting to the bottom of the problem would be super appreciated!</p>
  <p>Demo app/tests here:</p>
  <p><a href="https://codesandbox.io/s/useviewportsize-4l7gb?file=/src/use-viewport-size.test.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/useviewportsize-4l7gb?file=/src/use-viewport-size.test.tsx</a></p>
  <p>===========</p>
  <p><strong>Solution</strong></p>
  <p>Thanks to @tmhao2005 it seemed that the problem was down to the hook getting the resize values from <code>document</code> rather than <code>window</code>:</p>
  <pre><code>  setViewportSize({
      width: window.innerWidth, //document.documentElement.clientWidth - doesn't work
      height: window.innerHeight //document.documentElement.clientHeight - doesn't work
    });
  </code></pre>
  <p>It seems that getting the <code>clientWidth/Height</code> is fine in the app, but fails in the React Testing Library tests.</p>
  <p>I was opting for <code>client</code> sizing as I believe that does not include scollbar widths.</p>