fix(Next > CI): Drop Font import as Jest is not configured yet. Polyf…

…il for matchMedia

.github/workflows/ci.yaml

@@ -46,6 +46,9 @@ jobs:
 
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
+        with:
+          working-directory: next
 
       - name: 🔎 Type check
         run: npm run typecheck --if-present
+        working-directory: next

next/__mocks__/jsdom-missing.js

@@ -0,0 +1,13 @@
+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(),
+  })),
+});

next/__tests__/home.jsx

@@ -1,5 +1,7 @@
-import React from 'react'
+import '../__mocks__/jsdom-missing'; // Must be imported before the tested file
+
 import { render } from '@testing-library/react'
+
 import Home from '../pages'
 
 test('renders deploy link', () => {

next/package.json

@@ -17,7 +17,6 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/public-sans": "^5.0.5",
     "@mui/joy": "^5.0.0-alpha.89",
     "boom": "~7.3.0",
     "camelcase": "~6.3.0",

next/pages/index.tsx

@@ -1,4 +1,3 @@
-import '@fontsource/public-sans';
 import { List, ListDivider, ListItem } from '@mui/joy';
 import { CssVarsProvider } from '@mui/joy/styles';
 import Head from 'next/head';
@@ -47,7 +46,7 @@ function Home({ galleries }) {
                 maxHeight: '30em',
                 overflowY: 'auto',
               }}>
-                {galleries.map((item, i) => (
+                {galleries && galleries.map((item, i) => (
                   <>
                     {i > 0 && <ListDivider sx={{ background: '#ccc' }} inset="gutter"/>}
                     <ListItem><Link href={`/${item.gallery}`}>{item.gallery}</Link></ListItem>