5

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.

skyboyer
  • 15,149
  • 4
  • 41
  • 56
codeepic
  • 2,560
  • 5
  • 28
  • 52

5 Answers5

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.

Filipe Madureira
  • 173
  • 1
  • 14
Shaun Carter
  • 21
  • 2
  • I played with it and with jest config setup files and had no success. – codeepic Oct 17 '19 at 20:31
  • @codeepic same, I ended up mocking the widget component entirely. – Filipe Madureira Nov 05 '19 at 11:10
  • There's a few questions on Stack Overflow that are answered by "just install jest-canvas-mock and here's how to do 'setupFiles'". It'd be really helpful if those answers included a complete example test... just a trivial test would be fine but showing **how** jest-canvas-mock is used. – Andy Preston Nov 09 '20 at 12:28
2

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

rguerin
  • 1,645
  • 8
  • 25
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"]
}
Arnie Mc'Arnie
  • 26
  • 2
1

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>;
});
Filipe Madureira
  • 173
  • 1
  • 14
0

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';
Michael Karén
  • 719
  • 5
  • 13
  • There's a few questions on Stack Overflow that are answered by "just install jest-canvas-mock and here's how to do 'setupFiles'". It'd be really helpful if those answers included a complete example test... just a trivial test would be fine but showing **how** jest-canvas-mock is used. – Andy Preston Nov 09 '20 at 12:28
  • @AndyPreston It's not used by any tests but we get an error because the Okta Signin Widget uses a canvas I guess. So then this setup is needed to make any tests work that import the widget. My tests are not testing that widget at all since it's from a 3rd party and should be tested by them. – Michael Karén Nov 10 '20 at 13:38