chore: Add jest-matchmedia-mock to replace DIY mock (#26118)

Better for maintenance, but also because I need a better API surface of `matchMedia()` for a `gatsby-image` PR that uses it and fails tests otherwise.

package.json

@@ -163,6 +163,7 @@
   ],
   "dependencies": {
     "dictionary-en": "^3.0.1",
+    "jest-matchmedia-mock": "^1.0.1",
     "retext-emoji": "^7.0.1",
     "retext-spell": "^4.0.0",
     "retext-syntax-mentions": "^2.1.1",

packages/gatsby-image/src/__tests__/index.js

@@ -1,5 +1,6 @@
 import React from "react"
 import { render, cleanup, fireEvent } from "@testing-library/react"
+import MatchMediaMock from "jest-matchmedia-mock"
 import Image from "../"
 
 afterAll(cleanup)
@@ -117,22 +118,13 @@ const setupImages = (
   return container
 }
 
+let matchMedia
 describe(`<Image />`, () => {
-  const OLD_MATCH_MEDIA = window.matchMedia
-  beforeEach(() => {
-    // None of the media conditions above match.
-    window.matchMedia = jest.fn(media =>
-      media === `only screen and (min-width: 1024px)`
-        ? {
-            matches: true,
-          }
-        : {
-            matches: false,
-          }
-    )
+  beforeAll(() => {
+    matchMedia = new MatchMediaMock()
   })
   afterEach(() => {
-    window.matchMedia = OLD_MATCH_MEDIA
+    matchMedia.clear()
   })
 
   it(`should render fixed size images`, () => {
@@ -233,6 +225,9 @@ describe(`<Image />`, () => {
   })
 
   it(`should select the correct mocked image of fluid variants provided.`, () => {
+    const mediaQuery = `only screen and (min-width: 1024px)`
+    matchMedia.useMediaQuery(mediaQuery)
+
     const tripleFluidImageShapeMock = fluidImagesShapeMock.concat({
       aspectRatio: 5,
       src: `test_image_4.jpg`,
@@ -263,6 +258,9 @@ describe(`<Image />`, () => {
   })
 
   it(`should select the correct mocked image of fixed variants provided.`, () => {
+    const mediaQuery = `only screen and (min-width: 1024px)`
+    matchMedia.useMediaQuery(mediaQuery)
+
     const tripleFixedImageShapeMock = fixedImagesShapeMock.concat({
       width: 1024,
       height: 768,

yarn.lock

@@ -13458,6 +13458,11 @@ jest-matcher-utils@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
+jest-matchmedia-mock@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/jest-matchmedia-mock/-/jest-matchmedia-mock-1.0.1.tgz#da1c75be82a3b3e46e6c8ae195aa54e4a6032eb4"
+  integrity sha512-IXk2AnldfsCRmhB4pFY0Eb9mk2NxFqOgOwA4DxKOJ22T5bn/j3DzM5s3cdKxuEowmpuXK1gPXAIlVGIC+kb/fA==
+
 jest-message-util@^22.4.0, jest-message-util@^22.4.3:
   version "22.4.3"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-22.4.3.tgz#cf3d38aafe4befddbfc455e57d65d5239e399eb7"