opened 04:48AM - 19 Dec 20 UTC
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
```