Add setMediaWidth breakpoints test utility

.changeset/perfect-pens-press.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Set media width globally to `md` breakpoint by default for tests

polaris-react/src/components/AlphaCard/tests/AlphaCard.test.tsx

@@ -1,28 +1,13 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
-import {matchMedia} from '@shopify/jest-dom-mocks';
-import {
-  BreakpointsTokenName,
-  breakpoints,
-  getMediaConditions,
-} from '@shopify/polaris-tokens';
+import {setMediaWidth} from 'tests/utilities/breakpoints';
 
 import {AlphaCard} from '..';
 
-const mediaConditions = getMediaConditions(breakpoints);
-
 const heading = <p>Online store dashboard</p>;
 const subheading = <p>View a summary of your online store performance</p>;
 
 describe('AlphaCard', () => {
-  beforeEach(() => {
-    matchMedia.mock();
-  });
-
-  afterEach(() => {
-    matchMedia.restore();
-  });
-
   it('renders children', () => {
     const alphaCard = mountWithApp(
       <AlphaCard>
@@ -53,20 +38,3 @@ describe('AlphaCard', () => {
     });
   });
 });
-
-function setMediaWidth(breakpointsTokenName: BreakpointsTokenName) {
-  const aliasDirectionConditions = Object.values(
-    mediaConditions[breakpointsTokenName],
-  );
-
-  jest.spyOn(window, 'matchMedia').mockImplementation((query) => ({
-    matches: aliasDirectionConditions.includes(query),
-    media: '',
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  }));
-}

polaris-react/tests/setup/tests.ts

@@ -1,6 +1,19 @@
 import {destroyAll} from '@shopify/react-testing';
+import {matchMedia} from '@shopify/jest-dom-mocks';
 import '@shopify/react-testing/matchers';
 import './matchers';
+import {setMediaWidth} from 'tests/utilities/breakpoints';
+
+// eslint-disable-next-line jest/require-top-level-describe
+beforeAll(() => {
+  matchMedia.mock();
+  setMediaWidth('breakpoints-md');
+});
+
+// eslint-disable-next-line jest/require-top-level-describe
+afterAll(() => {
+  matchMedia.restore();
+});
 
 // eslint-disable-next-line jest/require-top-level-describe
 afterEach(() => {

polaris-react/tests/utilities/breakpoints.tsx

@@ -0,0 +1,24 @@
+import {
+  BreakpointsTokenName,
+  breakpoints,
+  getMediaConditions,
+} from '@shopify/polaris-tokens';
+
+const mediaConditions = getMediaConditions(breakpoints);
+
+export function setMediaWidth(breakpointsTokenName: BreakpointsTokenName) {
+  const aliasDirectionConditions = Object.values(
+    mediaConditions[breakpointsTokenName],
+  );
+
+  jest.spyOn(window, 'matchMedia').mockImplementation((query) => ({
+    matches: aliasDirectionConditions.includes(query),
+    media: '',
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  }));
+}