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.
4 respuestas
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"]
}
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.
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>;
});
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
Nuevas preguntas
angular
Preguntas sobre Angular (que no debe confundirse con AngularJS), el marco web de Google. Use esta etiqueta para preguntas angulares que no son específicas de una versión individual. Para el marco web anterior de AngularJS (1.x), use la etiqueta angularjs.