OktaSignInWidget breaks React Jest/Enzyme testing

Questions
1

Hello,

as already state here I found that OktaSignInWidget breaks my Jest/Enzyme tests in my React SPA. This has been halting my tests development for two days now so I really need some help here :frowning:

If I try to rended my App component which imports a custom SignInComponent who simply imports and renders the OktaSignInPlugin.

OktaSignInPlugin in turn crashes because of null props, in this case ‘backingStorePixelRatio’. Error:

 FAIL  src/App.test.js

● Test suite failed to run

TypeError: Cannot read property 'backingStorePixelRatio' of null

  1 | import React, { Component } from 'react';
  2 | import ReactDOM from 'react-dom';
> 3 | import OktaSignIn from '@okta/okta-signin-widget';
    | ^
  4 | import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
  5 | 
  6 | class SignInWidget extends Component {

  at node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/qtip2/dist/jquery.qtip.min.js:3:26873
  at Object.<anonymous> (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/qtip2/dist/jquery.qtip.min.js:3:27024)
  at node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/qtip2/dist/jquery.qtip.min.js:3:101
  at node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/qtip2/dist/jquery.qtip.min.js:3:138
  at Object.<anonymous> (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/qtip2/dist/jquery.qtip.min.js:4:12128)
  at __webpack_require__ (node_modules/@okta/okta-signin-widget/dist/js/webpack:/webpack/bootstrap 4daf3bea66f1545a0639:19:1)
  at Object.require (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/courage-dist/okta.js:4428:18)
  at call (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/courage-dist/okta.js:22:30)
  at Object.__webpack_require__ (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/courage-dist/okta.js:9089:63)
  at call (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/courage-dist/okta.js:22:30)
  at Object.__webpack_require__ (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/courage-dist/okta.js:7593:79)
  at call (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/courage-dist/okta.js:22:30)
  at Object.__webpack_require__ (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/courage-dist/okta.js:5238:17)
  at call (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/courage-dist/okta.js:22:30)
  at Object.__webpack_require__ (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/courage-dist/okta.js:5144:18)
  at call (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/courage-dist/okta.js:22:30)
  at __webpack_require__ (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/courage-dist/okta.js:65:18)
  at Object.<anonymous> (node_modules/@okta/okta-signin-widget/dist/js/webpack:/packages/@okta/courage-dist/okta.js:3:10)
  at __webpack_require__ (node_modules/@okta/okta-signin-widget/dist/js/webpack:/webpack/bootstrap 4daf3bea66f1545a0639:19:1)
  at Object.ceil (node_modules/@okta/okta-signin-widget/dist/js/webpack:/src/util/OAuth2Util.js:13:9)
  at __webpack_require__ (node_modules/@okta/okta-signin-widget/dist/js/webpack:/webpack/bootstrap 4daf3bea66f1545a0639:19:1)
  at require (node_modules/@okta/okta-signin-widget/dist/js/webpack:/src/widget/OktaSignIn.js:7:20)
  at Object.<anonymous> (node_modules/@okta/okta-signin-widget/dist/js/webpack:/src/widget/OktaSignIn.js:3:18)
  at __webpack_require__ (node_modules/@okta/okta-signin-widget/dist/js/webpack:/webpack/bootstrap 4daf3bea66f1545a0639:19:1)
  at Object.<anonymous> (node_modules/@okta/okta-signin-widget/dist/js/okta-sign-in.entry.js:32109:18)
  at __webpack_require__ (node_modules/@okta/okta-signin-widget/dist/js/webpack:/webpack/bootstrap 4daf3bea66f1545a0639:19:1)
  at node_modules/@okta/okta-signin-widget/dist/js/webpack:/webpack/bootstrap 4daf3bea66f1545a0639:62:1
  at node_modules/@okta/okta-signin-widget/dist/js/okta-sign-in.entry.js:76:10    
  at webpackUniversalModuleDefinition (node_modules/@okta/okta-signin-widget/dist/

This is a screenshot, just in case it’s useful

image
image.png709×752 77.5 KB

I used create-react-app to bootstrap my app, nothing fancy.

2

Looks like this thread is getting kinda ignored.

Any way of contacting the Okta dev team? Should i rather open an issue on Github?

3

If you are a customer, you should create a ticket for this issue.

1 Like
4

This is a bug in the library it’s not a personal issue/problem i need to solve.

Anyways i opened an issue on the official repo https://github.com/okta/okta-signin-widget/issues/935 .

5

@Fieel I had the same problem using Angular and Jest.

Try to add this line bellow in your jest.config.js
setupFiles: ['jest-canvas-mock'],