mauriciovigolo / keycloak-angular

Easy Keycloak setup for Angular applications.
MIT License
729 stars 280 forks source link

Running Jest fails with "TypeError: e.observe is not a function" #586

Open berkon opened 2 weeks ago

berkon commented 2 weeks ago

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search for issues before submitting
- [ ] feature request

I'm trying to run jest with keycloak-angular. There are no test cases there yet. When running npm test initially I got this error:

SyntaxError: Cannot use import statement outside a module

after adding keycloak-angular to the regex of the transformIgnorePatterns property of jest.config.ts ("adding" here in fact means removing it! Really strange logic!) the error turned into this:

TypeError: e.observe is not a function

Versions.

keycloak-angular@16.0.1 keycloak-js@25.0.6 angular@18.2.8

Repro steps.

The log given by the failure.

Test suite failed to run

TypeError: e.observe is not a function

> 30 | import { KeycloakService } from 'keycloak-angular';
       ^
at s (node_modules/keycloak-js/dist/keycloak.js:20:416)
at node_modules/keycloak-js/dist/keycloak.js:20:4471
at node_modules/keycloak-js/dist/keycloak.js:20:33
at node_modules/keycloak-js/dist/keycloak.js:20:38
at node_modules/keycloak-js/dist/keycloak.js:21:4
at node_modules/keycloak-js/dist/keycloak.js:2:82
at Object.<anonymous> (node_modules/keycloak-js/dist/keycloak.js:5:3)
at Object.<anonymous> (node_modules/keycloak-angular/fesm2022/keycloak-angular.mjs:6:22)
at Object.<anonymous> (src/app/header/header.component.ts:30:1)
at Object.<anonymous> (src/app/navigation/left-side-menu/left-side-menu.component.ts:26:1)
at Object.<anonymous> (src/app/navigation/left-side-menu/left-side-menu.component.spec.ts:3:1)

Desired functionality.

Running jest should not fail because of e.observe

ash-burns commented 2 days ago

I'm facing the same problem, I think it has been introduced by keycloak-js v26 rather.

berkon commented 1 day ago

@ash-burns I was able to solve it with a workaround. You have to put this in your jest-setup.ts:

// @ts-ignore
window.MutationObserver = window[Zone.__symbol__("MutationObserver")];

The // @ts-ignore line is very important, otherwise the TS compiler will complain. I got the solution from this post:

https://github.com/capricorn86/happy-dom/issues/1514#issuecomment-2321982309