Comme dans le titre.
Ce problème a été détecté sur les forums de développement Okta https://devforum.okta.com/t/okta-sign-in-widget-breaks-neutrino-jest-tests/2874 où l'auteur mentionne l'ajout de canvas-prebuilt Le paquet npm de devDependencies l'a corrigé pour lui.
Malheureusement, cela n'a pas fonctionné pour moi.
Quelqu'un a rencontré cette erreur lors de l'utilisation du widget de connexion Okta?
J'utilise Jest 23.x et ces deux packages npm qui m'aident à intégrer le widget de connexion Okta dans mon application Angular .
Tout fonctionne parfaitement - je peux me connecter et me déconnecter avec succès - à l'exception de l'erreur lors de l'exécution des tests Jest.
EDIT: J'ai également trouvé ce problème Github https://github.com/cssivision/qrcode-react/issues/15 qui semble être quelque peu lié à mon problème mais la solution m'échappe toujours.
2ème EDIT:
Ceci est la pile d'erreurs complète
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
ce problème de Github et une enquête plus approfondie m'a conduit à jest-canvas-mock package npm qui doit être ajouté en tant que devDependency et configuré à l'aide du tableau jest setupFiles dans package.json - ET ENCORE ENCORE Je vois le même message d'erreur.
5 Réponses :
J'ai rencontré un problème similaire, regardez ici , résolu en ajoutant à jestConfig.ts suivant l'extrait de code
"jest": {
"setupFiles": ["jest-canvas-mock"]
}
et ajouté dans package.json
Object.defineProperty(window, 'getComputedStyle', {
value: () => ({
getPropertyValue: (prop) => {
return '';
}
})
});
Tout ce que j'avais à faire était d'installer jest canvas mock
npm i jest-canvas-mock
ajouter ceci à package.json
"jest": {
"setupFiles": ["jest-canvas-mock"]
}
Utilisation de create-react-app.
J'ai joué avec et avec des fichiers de configuration de configuration jest et je n'ai eu aucun succès.
@codeepic idem, j'ai fini par me moquer entièrement du composant widget.
Il y a quelques questions sur Stack Overflow auxquelles répond "il suffit d'installer jest-canvas-mock et voici comment faire" setupFiles "". Ce serait vraiment utile si ces réponses incluaient un exemple de test complet ... juste un test trivial serait bien mais montrant comment jest-canvas-mock est utilisé.
J'ai publié un problème dans le référentiel officiel et trouvé un solution élégante.
Il suffit de se moquer du SignInWidget qui est la meilleure approche pour mieux isoler vos tests (à moins que vous ne souhaitiez tester le widget qui est inutile, laissez cela à l'équipe d'Okta qui gère le package)
jest.mock("./components/auth/SignInWidget", () => {
return <div>SignInWidgetMock</div>;
});
Ok, merci pour celui-ci - vous devrez peut-être essayer une fois de plus avec votre exemple.
Nous étions dans la même situation, en testant le Okta SignIn Widget avec Angular TestBed et Jest .
Nous l'avons résolu en se moquer de l'importation Okta et réimporter le composant avant chaque 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);
}));
...
});
J'espère que cela aide
Ok, je dois essayer. Je vous ferai savoir comment cela a fonctionné pour moi.
Aucune des solutions ci-dessus n'a fonctionné pour moi mais j'ai pu le résoudre comme ceci:
import 'jest-canvas-mock';
Ensuite, ajoutez ceci à src / setupTests.js ou src / test-setup.ts ou quel que soit le nom du fichier:
npm install -D jest-canvas-mock
Il y a quelques questions sur Stack Overflow auxquelles répond "il suffit d'installer jest-canvas-mock et voici comment faire" setupFiles "". Ce serait vraiment utile si ces réponses incluaient un exemple de test complet ... juste un test trivial serait bien mais montrant comment jest-canvas-mock est utilisé.
@AndyPreston Il n'est utilisé par aucun test, mais nous obtenons une erreur car le widget Okta Signin utilise un canevas, je suppose. Donc, cette configuration est nécessaire pour faire fonctionner tous les tests qui importent le widget. Mes tests ne testent pas du tout ce widget car il provient d'un tiers et devrait être testé par eux.