MutationObserver observe is not a function

[CUBITECH]

Hi,
in an Angular project, i have switched from JSDom to Happy Dom, for many reasons... I am using Jest as Testing Framework and jest-axe for a11y Tests.
jest-axe uses MutationObserver for observing DOM changes, but the MutationObserver class in Happy Dom seems to work different(ly?).
After instantiating a MutationObserver the new object has no function 'observe', hence jest-axe throws an 'observer.observe is not a function' exception.

To Reproduce
Steps to reproduce the behavior:

1. In an Angular Project: Setup Jest as Testing Framework
2. Add jest-axe for a11y Tests
3. Add a test to an Angular component like described here https://www.npmjs.com/package/jest-axe "Testing Angular with nx"
4. Run Spec
5. axe-core throws observer.observe is not a function (Relevant code https://www.npmjs.com/package/axe-core?activeTab=code L:3555 - 3583)

Expected behavior
MutationObserver works as expected.

Let me know if you need more information.

Thanks!

[capricorn86]

Thank you for reporting @CUBITECH! 🙂

The instance method observe() is available in the MutationObserver in Happy DOM.

Example:

`const observer = new MutationObserver((records) => {
	console.log(records);
})
observer.observe(element);

Do you have a repo or can you reproduce it in a test environment, so that we can debug what is causing the problem?

[CUBITECH]

Hi,

have build a StackBlitz: https://stackblitz.com/edit/happy-dom-issue-1514.
Just run 'jest' in terminal.

[capricorn86]

The problem seem to be that zode.js (which jest-preset-angular is using) patches several native classes with something that looks like this:
{ __zone_symbol__originalInstance: MutationObserver {} }

There is an issue for it here, but they don't seem to want to fix it:
angular/angular#36460

The workaround seem to be to do:

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

My opinion is that it is a pretty bad idea to wrap the native classes, as no other libraries than Zone compatible libraries will work in this environment, but perhaps I have missed something 😅

I will close this as this seem to be an issue with Angular and Zone.js and not Happy DOM.

[CUBITECH]

Thanks for watching and the workaround!