title: Testing UI with conditional rendering based on screen size
body: <p>I'm using <code>react-testing-library</code> with <code>jest</code> to test storybook stories. I have a component that, based on it's <code>scrollWidth</code> and the <code>clientWidth</code> it conditionally renders a button to page through the component:</p>
  <pre><code>function Collection({
    children,
    scrollOffset = DEFAULT_SCROLL_X_OFFSET,
    onScroll,
    ...rest
  }: HorizontalChipCollectionProps) {
    const [scrollX, setScrollX] = useState(0); // For detecting start scroll postion
    const [showRightPager, setShowRightPager] = useState(false); // For detecting end of scrolling
    const scrollableAreaRef = useRef();
  
    const scrollableAreaCallback = React.useCallback((node) =&gt; {
      scrollableAreaRef.current = node;
      /** Check to see if the scrollWidth is less than the full width, if so hide the right arrow */
      if (node?.scrollWidth &lt;= node?.clientWidth) {
        setShowRightPager(true);
      }
    }, [setShowRightPager]);
  
    const leftPageOnClick = () =&gt; pagerOnClick(PAGER_DIRECTION.LEFT);
    const rightPageOnClick = () =&gt; pagerOnClick(PAGER_DIRECTION.RIGHT);
  
    return (
      &lt;Box&gt;
        &lt;ScrollableArea
          py={{
            base: 'xsmall',
            medium: 'small',
          }}
          display=&quot;flex&quot;
          ref={scrollableAreaCallback}
          onScroll={scrollCurrCheck}
          overflowX=&quot;auto&quot;
          css={css`
            &gt; *:not(:last-child) {
              margin-right: var(--space-small);
            }
          `}
          {...rest}
        &gt;
          {children}
        &lt;/ScrollableArea&gt;
        {!showRightPager ? &lt;Pager data-testid=&quot;right-pager&quot; variant=&quot;right&quot; onClick={rightPageOnClick} /&gt; : null}
      &lt;/Box&gt;
    );
  }
  </code></pre>
  <p>I'm trying to test the <code>rightPageOnClick</code> to confirm it works but I'm unable to find the element in my test. Here is my test:</p>
  <pre><code>    test('should show pager buttons', () =&gt; {
        window.innerWidth = 1440;
        window.innerHeight = 900;
        window.dispatchEvent(new Event('resize'));
        render(&lt;Basic /&gt;);
        const rightPager = screen.getByTestId('right-pager');
        expect(rightPager).toBeInTheDocument();
      });
  </code></pre>
  <p>Let me know if you need any more info from me!</p>