From 374919aa1be3c18c0c15b12bbdd84e5374a6f07f Mon Sep 17 00:00:00 2001
From: polarathene <5098581+polarathene@users.noreply.github.com>
Date: Thu, 30 Jul 2020 14:37:50 +1200
Subject: [PATCH] chore: Add `jest-matchmedia-mock` to replace DIY mock

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                                 |  1 +
 packages/gatsby-image/src/__tests__/index.js | 24 +++++++++-----------
 yarn.lock                                    |  5 ++++
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index aecb828652b24..bb5d77a617ae3 100644
--- a/package.json
+++ b/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",
diff --git a/packages/gatsby-image/src/__tests__/index.js b/packages/gatsby-image/src/__tests__/index.js
index f8892facfc0e2..65c17498c6b90 100644
--- a/packages/gatsby-image/src/__tests__/index.js
+++ b/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,
diff --git a/yarn.lock b/yarn.lock
index 40c7c29063daf..182a92b662594 100644
--- a/yarn.lock
+++ b/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"