Okta Sign-in widget breaks Jest tests - TypeError: Cannot read property 'backingStorePixelRatio' of null

Question

As in the title.

Found this issue on Okta dev forums https://devforum.okta.com/t/okta-sign-in-widget-breaks-neutrino-jest-tests/2874 where the author mentions that adding canvas-prebuiltnpm package to devDependencies fixed it for him.

Sadly it didn't work for me.

Anyone encountered this error when using Okta sign-in widget?

I am using Jest 23.x and these two npm packages that help me integrate Okta sign in widget inside my Angular app.

• "@okta/okta-angular": "^1.2.1",
• "@okta/okta-signin-widget": "^2.19.0",

Everything works perfectly - I can successfully log in and out - except for the error when running Jest tests.

EDIT: I also found this Github issue https://github.com/cssivision/qrcode-react/issues/15 that seems to be somewhat related to my problem but the solution still eludes me.

2nd EDIT:

This is the full error stack

 console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
    at module.exports (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\jsdom\lib\jsdom\browser\not-implemented.js:9:17)
    at HTMLCanvasElementImpl.getContext (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\jsdom\lib\jsdom\living\nodes\HTMLCanvasElement-impl.js:42:5)
    at HTMLCanvasElement.getContext (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\jsdom\lib\jsdom\living\generated\HTMLCanvasElement.js:50:45)
    at getContext (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\@okta\okta-signin-widget\dist\js\webpack:\packages\@okta\qtip2\dist\jquery.qtip.js:2078:50)
    at Object.<anonymous> (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\@okta\okta-signin-widget\dist\js\webpack:\packages\@okta\qtip2\dist\jquery.qtip.js:2077:24)
FAIL  src/app/ion-okta-auth/login/__tests__/login.component.spec.tsules\@okta\okta-signin-widget\dist\js\webpack:\packages\@okta\qtip2\dist\jquery.qtip.js:22:3

this Github issue and further investigation led me to jest-canvas-mock npm package that nees to be added as devDependency and set up using jest setupFiles array in package.json - AND YET AGAIN I see the same error message.

Answer 1

I had a similar issue, have a look here , resolved by adding into jestConfig.ts following snippet

Object.defineProperty(window, 'getComputedStyle', {
	value: () => ({
		getPropertyValue: (prop) => {
			return '';
		}
	})
});

and added in package.json

"jest": {
   "setupFiles": ["jest-canvas-mock"]
}

Answer 2

All I had to do was install jest canvas mock

npm i jest-canvas-mock

add this to package.json

"jest": {
   "setupFiles": ["jest-canvas-mock"]
}

Using create-react-app.