How to mock ResizeObserver

[philly-vanilly]

I am getting ResizeObserver loop completed with undelivered notifications. in the tests. I am using vuetify and the recommendation is to add resize-observer-polyfill https://vuetifyjs.com/en/getting-started/unit-testing/#setup-vitest. When switching from regular to browser execution, this does not work anymore as global (outside node context) is not defined:

import resize_observer_polyfill from 'resize-observer-polyfill';
(global as any).ResizeObserver = resize_observer_polyfill;

other objects are defined but make no difference when you attach the ResizeObserver:

self.ResizeObserver = resize_observer_polyfill;
self.window.ResizeObserver = resize_observer_polyfill;
window.ResizeObserver = resize_observer_polyfill;
document.ResizeObserver = resize_observer_polyfill;

I tried assigning in test-setup.ts as defined in vitest.config as well as in beforeEach(...)

[sheremet-va]

ResizeObserver exists in the browser, you don't need to polyfill it. The polyfill exists for the Node.js tests

[philly-vanilly]

@sheremet-va Is there a way to ignore the error, then? Or to replace the real resize observer with a dummy? The error does not appear when I use the tested components in the actual app, just in the tests. I assume because the component is unmounted before resize observer listener is terminated?

[sheremet-va]

I assume because the component is unmounted before resize observer listener is terminated?

Do you terminated it at all? Vitest doesn't release any resources

[philly-vanilly]

@sheremet-va Yes, the tests terminate. They even pass, but with errors being thrown subsequently from the looks of it (see screenshots), causing the final result to fail:

[sheremet-va]

I'm asking if you terminate the observer (in unmount, for example)

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/unobserve

[philly-vanilly]

I'm asking if you terminate the observer (in unmount, for example)

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/unobserve

I have no resize observer relevant code myself, I guess it is in a vue-date-picker component, which is an npm lib and outside my control. I have had similar issues with v-selects and v-autocompletes from vuetify in cypress tests and had to ignore them to keep the tests green. Is there a way to do this in a vitest-browser-vue setup with chromium and playwright?