win.matchMedia in SSR

pinktoadette0 · July 26, 2021, 4:44pm

Been seeing posted here and SO.

Is there an eta on this?

github.com/ionic-team/ionic-framework

bug: isPWA does not work in ssr/tests

opened 04:48AM - 19 Dec 20 UTC

devinshoemaker

package: angular package: react type: bug

# Bug Report **Ionic version:** [ ] **4.x** [x] **5.x** **Current be…havior:** After generating an Ionic React application with the `sidemenu` template, the generated unit tests fail. **Expected behavior:** The unit tests generated with the Ionic CLI should pass. **Steps to reproduce:** `ionic start --type react` Select `sidemenu` `npm test` **Other information:** The error appears to occur when the `IonIcon` component tries to determine the current platform. I've read that this function is pretty easy to mock, but I'm not sure how this should be handled by the CLI with generating new applications. ## Test Error ``` TypeError: win.matchMedia is not a function 4 | 5 | test('renders without crashing', () => { > 6 | const { baseElement } = render(<App />); | ^ 7 | expect(baseElement).toBeDefined(); 8 | }); 9 | at Object.isPWA [as pwa] (node_modules/@ionic/core/dist/cjs/ionic-global-75ba08dd.js:71:31) at node_modules/@ionic/core/dist/cjs/ionic-global-75ba08dd.js:25:89 at Array.filter (<anonymous>) at detectPlatforms (node_modules/@ionic/core/dist/cjs/ionic-global-75ba08dd.js:25:61) at setupPlatforms (node_modules/@ionic/core/dist/cjs/ionic-global-75ba08dd.js:20:39) at getPlatforms (node_modules/@ionic/core/dist/cjs/ionic-global-75ba08dd.js:5:31) at Object.isPlatformCore [as isPlatform] (node_modules/@ionic/core/dist/cjs/ionic-global-75ba08dd.js:11:10) at isPlatform (node_modules/@ionic/react/src/components/utils/index.tsx:34:10) at IonIconContainer.render (node_modules/@ionic/react/src/components/IonIcon.tsx:45:11) at finishClassComponent (node_modules/react-dom/cjs/react-dom.development.js:17160:31) at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:17110:24) at beginWork (node_modules/react-dom/cjs/react-dom.development.js:18620:16) at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14) at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27) at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9) at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17) at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27) at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21) at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:237:16) at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:292:31) at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23203:7) at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22157:12) at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22130:22) at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:21756:9) at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21188:7) at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:24373:3) at node_modules/react-dom/cjs/react-dom.development.js:24758:7 at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:21903:12) at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24757:5) at Object.render (node_modules/react-dom/cjs/react-dom.development.js:24840:10) at node_modules/@testing-library/react/dist/pure.js:86:25 at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12) at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14) at render (node_modules/@testing-library/react/dist/pure.js:82:26) at Object.<anonymous> (src/App.test.tsx:6:27) console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29 Error: Uncaught [TypeError: win.matchMedia is not a function] at reportException (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24) at invokeEventListeners (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9) at HTMLUnknownElementImpl._dispatch (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9) at HTMLUnknownElementImpl.dispatchEvent (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17) at HTMLUnknownElementImpl.dispatchEvent (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27) at HTMLUnknownElement.dispatchEvent (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21) at Object.invokeGuardedCallbackDev (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:237:16) at invokeGuardedCallback (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:292:31) at beginWork$1 (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:23203:7) at performUnitOfWork (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:22157:12) TypeError: win.matchMedia is not a function at Object.isPWA [as pwa] (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/@ionic/core/dist/cjs/ionic-global-75ba08dd.js:71:31) at /Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/@ionic/core/dist/cjs/ionic-global-75ba08dd.js:25:89 at Array.filter (<anonymous>) at detectPlatforms (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/@ionic/core/dist/cjs/ionic-global-75ba08dd.js:25:61) at setupPlatforms (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/@ionic/core/dist/cjs/ionic-global-75ba08dd.js:20:39) at getPlatforms (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/@ionic/core/dist/cjs/ionic-global-75ba08dd.js:5:31) at Object.isPlatformCore [as isPlatform] (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/@ionic/core/dist/cjs/ionic-global-75ba08dd.js:11:10) at isPlatform (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/@ionic/react/src/components/utils/index.tsx:34:10) at IonIconContainer.render (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/@ionic/react/src/components/IonIcon.tsx:45:11) at finishClassComponent (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:17160:31) at updateClassComponent (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:17110:24) at beginWork (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:18620:16) at HTMLUnknownElement.callCallback (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:188:14) at invokeEventListeners (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27) at HTMLUnknownElementImpl._dispatch (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9) at HTMLUnknownElementImpl.dispatchEvent (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17) at HTMLUnknownElementImpl.dispatchEvent (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27) at HTMLUnknownElement.dispatchEvent (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21) at Object.invokeGuardedCallbackDev (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:237:16) at invokeGuardedCallback (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:292:31) at beginWork$1 (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:23203:7) at performUnitOfWork (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:22157:12) at workLoopSync (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:22130:22) at performSyncWorkOnRoot (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:21756:9) at scheduleUpdateOnFiber (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:21188:7) at updateContainer (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:24373:3) at /Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:24758:7 at unbatchedUpdates (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:21903:12) at legacyRenderSubtreeIntoContainer (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:24757:5) at Object.render (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:24840:10) at /Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/@testing-library/react/dist/pure.js:86:25 at batchedUpdates$1 (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom.development.js:21856:12) at act (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14) at render (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/@testing-library/react/dist/pure.js:82:26) at Object.<anonymous> (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/src/App.test.tsx:6:27) at Object.asyncJestTest (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37) at /Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jest-jasmine2/build/queueRunner.js:43:12 at new Promise (<anonymous>) at mapper (/Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jest-jasmine2/build/queueRunner.js:26:19) at /Users/devinshoemaker/Code/playground/ionic-react-sidemenu/node_modules/jest-jasmine2/build/queueRunner.js:73:41 at processTicksAndRejections (internal/process/task_queues.js:93:5) ``` **Ionic info:** ``` Ionic: Ionic CLI : 6.12.2 (/Users/devinshoemaker/.nvm/versions/node/v14.15.1/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 5.5.2 Capacitor: Capacitor CLI : 2.4.5 @capacitor/core : 2.4.5 Utility: cordova-res : not installed native-run : not installed System: NodeJS : v14.15.1 (/Users/devinshoemaker/.nvm/versions/node/v14.15.1/bin/node) npm : 6.14.8 OS : macOS Big Sur ```

Topic		Replies	Views
Npm run dev:ssr throwing errors on ionic pwa Ionic Angular	0	526	June 26, 2021
head.querySelector is not a function Ionic Angular	0	646	August 21, 2021
Ionic angular server side rendering showing to many errors Ionic Angular	1	2539	April 17, 2020
Ionic 4 vs Angular 6 (+Material) - For PWA with emphasis on SSR ionic-v3	13	15861	July 19, 2021
How can I do SSR in a hybird ionic app?(partial) Ionic Angular	8	2855	May 24, 2022

win.matchMedia in SSR

Related topics