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

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.

Answer 2

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 3

I posted an issue in the official repo and found an elegant solution.

Just mock the SignInWidget which is the best approach so you can isolate better your tests (unless you want to test the widget which is useless, leave that to the Okta team maintaining the package)

jest.mock("./components/auth/SignInWidget", () => {
  return <div>SignInWidgetMock</div>;
});

Answer 4

We were in the same situation, testing the Okta SignIn Widget with the Angular TestBed and Jest.

We solved it by mocking the Okta import and reimporting the component before each test:

import { async, TestBed, ComponentFixture } from '@angular/core/testing';    

describe('AuthenticationFormComponent', () => {
   jest.mock('@okta/okta-signin-widget/dist/js/okta-sign-in.min', () => {
      class MockSigninWidget {
        public renderEl(_, success) {
          success();
        }
      }
      return { __esModule: true, default: MockSigninWidget };
   });

  let fixture: ComponentFixture<any>;

  beforeEach(async(async () => {
    const { AuthenticationFormComponent } = await import('./authentication-form.component');

    TestBed.configureTestingModule({
      declarations: [AuthenticationFormComponent],
      providers: [...],
    }).compileComponents();

    fixture = TestBed.createComponent(AuthenticationFormComponent);
  }));

...

});

Hope it helps

Answer 5

None of the solutions above worked for me but I was able to solve it like this:

npm install -D jest-canvas-mock

Then add this to src/setupTests.js or src/test-setup.ts or whatever the file is named:

import 'jest-canvas-mock';