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	537	June 26, 2021
Whether ionic4 can use ssr Ionic Framework	0	353	November 21, 2019
Unit tests + e2e tests ionic-v3	1	465	March 30, 2017
IONIC CAPACITOR APP IonApp classname is undefined instead of platform Ionic React	2	517	September 10, 2022
Ionic dom platform detected on iOS device Ionic Framework	0	402	September 1, 2022

win.matchMedia in SSR

Related topics