TypeError: Cannot read property 'backStorePixelRatio' of null vuejs test.

[harissg]

I am trying to shallowMount and mount found here https://vue-test-utils.vuejs.org/api/options.html#context the VueCytoscape component which is wrapped inside of a Parent component, for testing like so:

let options: ThisTypedShallowMountOptions<Visualization> | undefined = { propsData: { data: '<xml></xml>', }, stubs: { 'VueCytoscape': VueCytoscape, }, template: '<VueCytoscape/>' } const wrapper = shallowMount(Visualization, options); <<fails

It is failing with the below error:

TypeError: Cannot read property 'backingStorePixelRatio' of null
at Renderer.Object..module.exports.44e1.CRp$6.getPixelRatio (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:29119:1)
at Renderer.Object..module.exports.44e1.CRp$6.matchCanvasSize (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:29301:1)
at Renderer.Object..module.exports.44e1.BRp$f.notify (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:26136:1)
at Core.notify (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:13727:1)
at Core.emitAndNotify (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:13641:1)
at Core. (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:17981:1)
at _loop2 (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:10013:1)
at C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:10025:1
at forEachEventObj (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:9883:1)
at Emitter.Object..module.exports.44e1.p.emit.p.trigger (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:9983:1)
at Core.emit (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:13636:1)
at C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:10030:1
at forEachEventObj (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:9886:1)
at Emitter.Object..module.exports.44e1.p.emit.p.trigger (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:9983:1)
at Layout.emit (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:30584:1)
at Collection.layoutPositions (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:10934:1)
at Layout.DagreLayout.run (C:\Users\hgillani\Documents\git\proj\packages\app\node_modules\cytoscape-dagre\cytoscape-dagre.js:281:9)
at setElesAndLayout (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:17988:1)
at C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:18000:1
at loadExtData (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:17947:1)
at new Core (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:17991:1)
at cytoscape (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\node_modules\cytoscape\dist\cytoscape.cjs.js:30782:1)
at VueComponent.mounted (C:\Users\hgillani\Documents\git\proj\node_modules\vue-cytoscape\dist\webpack:\vue-cytoscape\src\components\Cytoscape.ts:34:31)
at invokeWithErrorHandling (C:\Users\hgillani\Documents\git\proj\node_modules\vue\dist\vue.js:1863:59)
at callHook (C:\Users\hgillani\Documents\git\proj\node_modules\vue\dist\vue.js:4220:9)
at Object.insert (C:\Users\hgillani\Documents\git\proj\node_modules\vue\dist\vue.js:3146:9)
at invokeInsertHook (C:\Users\hgillani\Documents\git\proj\node_modules\vue\dist\vue.js:6341:30)
at VueComponent.patch [as patch] (C:\Users\hgillani\Documents\git\proj\node_modules\vue\dist\vue.js:6558:7)
at VueComponent.Vue._update (C:\Users\hgillani\Documents\git\proj\node_modules\vue\dist\vue.js:3946:21)
at VueComponent.updateComponent (C:\Users\hgillani\Documents\git\proj\node_modules\vue\dist\vue.js:4067:12)
at Watcher.get (C:\Users\hgillani\Documents\git\proj\node_modules\vue\dist\vue.js:4478:27)
at new Watcher (C:\Users\hgillani\Documents\git\proj\node_modules\vue\dist\vue.js:4467:14)
at mountComponent (C:\Users\hgillani\Documents\git\proj\node_modules\vue\dist\vue.js:4074:5)
at VueComponent.Vue.$mount (C:\Users\hgillani\Documents\git\proj\node_modules\vue\dist\vue.js:9044:12)
at VueComponent.Vue.$mount (C:\Users\hgillani\Documents\git\proj\node_modules\vue\dist\vue.js:11944:18)
at mount (C:\Users\hgillani\Documents\git\proj\node_modules@vue\test-utils\dist\vue-test-utils.js:14032:21)
at shallowMount (C:\Users\hgillani\Documents\git\proj\node_modules@vue\test-utils\dist\vue-test-utils.js:14058:10)
at Object. (C:\Users\hgillani\Documents\git\proj\packages\app\src\client\components\workflows\Visualization\workflow-visualization.jest.ts:46:25)
at Object.asyncJestTest (C:\Users\hgillani\Documents\git\proj\node_modules\jest-jasmine2\build\jasmineAsyncInstall.js:106:37)
at C:\Users\hgillani\Documents\git\proj\node_modules\jest-jasmine2\build\queueRunner.js:45:12
at new Promise ()
at mapper (C:\Users\hgillani\Documents\git\proj\node_modules\jest-jasmine2\build\queueRunner.js:28:19)
at C:\Users\hgillani\Documents\git\proj\node_modules\jest-jasmine2\build\queueRunner.js:75:41

Can you provide an example for testing with Typescript and Vue?