El widget de inicio de sesión de Okta rompe las pruebas de Jest - TypeError: no se puede leer la propiedad 'backingStorePixelRatio' de null

Question

Como en el titulo.

Encontré este problema en los foros de desarrollo de Okta https : //devforum.okta.com/t/okta-sign-in-widget-breaks-neutrino-jest-tests/2874 donde el autor menciona que agregar canvas-prebuilt paquete npm a devDependencies lo solucionó él.

Lamentablemente no me funcionó.

¿Alguien encontró este error al usar el widget de inicio de sesión Okta?

Estoy usando Jest 23.xy estos dos paquetes npm que me ayudan a integrar el widget de inicio de sesión Okta dentro de mi aplicación Angular.

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

Todo funciona perfectamente, puedo iniciar y cerrar sesión con éxito, excepto el error al ejecutar las pruebas de Jest.

EDITAR: También encontré este problema de Github https://github.com/cssivision/qrcode- reaccionar / problemas / 15 que parece estar algo relacionado con mi problema, pero la solución aún se me escapa.

2da EDICIÓN:

Esta es la pila de errores completa

 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

este problema de Github y otras investigaciones me llevaron a jest-canvas-mock paquete npm que debe agregarse como devDependency y configurarse utilizando la matriz jest setupFiles en el paquete .json - Y DE NUEVO, veo el mismo mensaje de error.

angular jestjs okta

3

codeepic 10 may. 2019 a las 17:03

Answer 1

Tuve un problema similar, eche un vistazo aquí, resuelto agregando a jestConfig.ts siguiente fragmento

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

Y agregado en package.json

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

1

Arnie Mc'Arnie 23 may. 2019 a las 09:31

Answer 2

Todo lo que tenía que hacer era instalar jest canvas simulacro

npm i jest-canvas-mock

Agregue esto a package.json

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

Usando create-react-app.

1

Filipe Madureira 30 oct. 2019 a las 11:27

Answer 3

publiqué un problema en el repositorio oficial y encontré una solución elegante.

Simplemente burlarse de SignInWidget, que es el mejor enfoque para que pueda aislar mejor sus pruebas (a menos que quiera probar el widget que es inútil, déjelo al equipo de Okta que mantiene el paquete)

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

0

Filipe Madureira 5 nov. 2019 a las 11:09

Answer 4

Estábamos en la misma situación, probando Okta SignIn Widget con Angular TestBed y Jest.

Lo solucionamos burlándonos de la importación de Okta y reimportando el componente antes de cada prueba:

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);
  }));

...

});

Espero que ayude

1

rguerin 3 dic. 2019 a las 12:51

El widget de inicio de sesión de Okta rompe las pruebas de Jest - TypeError: no se puede leer la propiedad 'backingStorePixelRatio' de null

4 respuestas

Nuevas preguntas

angular