How to test a useMediaQuery hook with Jest?

Question

I am trying to setup Jest to verify behavior tied to a custom useMediaQuery() hook, but I'm finding that the documented mocks may be interfering.

useMediaQuery() borrowed from Netlify

import { useState, useEffect } from 'react';

export function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => {
      setMatches(media.matches);
    };
    media.addListener(listener);
    return () => media.removeListener(listener);
  }, [matches, query]);

  return matches;
}

window.matchMedia mock lifted from Jest docs

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // Deprecated
    removeListener: jest.fn(), // Deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

Test setup derived from here and here

// When the viewport with is <= 600px, Component internally chooses a hardcoded truncated site title
it(`renders truncated siteTitle when viewport is small or less`, () => {
  const siteTitle = `Full Title`
  const truncatedSiteTitle = `FT`
  const { getByText, rerender } = render(<Component
    siteTitle={siteTitle}
    actions={actions}
  />)

  fireResize(300)

  rerender(<Component
    siteTitle={siteTitle}
    actions={actions}
  />)

  const title = getByText(truncatedSiteTitle)
  expect(title).toBeInTheDocument()
})