title: Okta Sign-in widget breaks Jest tests - TypeError: Cannot read property 'backingStorePixelRatio' of null
body: <p>As in the title. </p>
  
  <p>Found this issue on Okta dev forums <a href="https://devforum.okta.com/t/okta-sign-in-widget-breaks-neutrino-jest-tests/2874" rel="noreferrer">https://devforum.okta.com/t/okta-sign-in-widget-breaks-neutrino-jest-tests/2874</a> where the author mentions that adding <code>canvas-prebuilt</code>npm package to devDependencies fixed it for him.</p>
  
  <p>Sadly it didn't work for me. </p>
  
  <p>Anyone encountered this error when using Okta sign-in widget?</p>
  
  <p>I am using Jest 23.x and these two npm packages that help me integrate Okta sign in widget inside my Angular app.</p>
  
  <ul>
  <li>"@okta/okta-angular": "^1.2.1",</li>
  <li>"@okta/okta-signin-widget": "^2.19.0",</li>
  </ul>
  
  <p>Everything works perfectly - I can successfully log in and out - except for the error when running Jest tests.</p>
  
  <p>EDIT: I also found this Github issue <a href="https://github.com/cssivision/qrcode-react/issues/15" rel="noreferrer">https://github.com/cssivision/qrcode-react/issues/15</a> that seems to be somewhat related to my problem but the solution still eludes me.</p>
  
  <p>2nd EDIT:</p>
  
  <p>This is the full error stack</p>
  
  <pre><code> 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.&lt;anonymous&gt; (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
  </code></pre>
  
  <p><a href="https://github.com/hustcc/jest-canvas-mock/issues/2" rel="noreferrer">this</a> Github issue and further investigation led me to <a href="https://github.com/hustcc/jest-canvas-mock" rel="noreferrer">jest-canvas-mock</a> 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.</p>