diff --git a/cypress/e2e/support/resize-observer-mock.js b/cypress/e2e/support/resize-observer-mock.js new file mode 100644 index 00000000000..7c22e3496fa --- /dev/null +++ b/cypress/e2e/support/resize-observer-mock.js @@ -0,0 +1,26 @@ +// Mock ResizeObserver to prevent "ResizeObserver loop completed with undelivered notifications" errors +class ResizeObserverMock { + constructor(callback) { + this.callback = callback; + this.observations = new Map(); + } + + observe(element) { + this.observations.set(element, {}); + // Trigger initial callback + this.callback([{ target: element }], this); + } + + unobserve(element) { + this.observations.delete(element); + } + + disconnect() { + this.observations.clear(); + } +} + +// Replace the global ResizeObserver with our mock +if (window.ResizeObserver) { + window.ResizeObserver = ResizeObserverMock; +} diff --git a/cypress/support/index.js b/cypress/support/index.js index 3615f85fc5a..40c81a6c062 100644 --- a/cypress/support/index.js +++ b/cypress/support/index.js @@ -1,16 +1,14 @@ import 'cypress-plugin-tab'; +import '../e2e/support/resize-observer-mock'; -/* - * This is a workaround for the ResizeObserver loop error that occurs in Cypress. - * See https://github.com/cypress-io/cypress/issues/20341 - * See https://github.com/cypress-io/cypress/issues/29277 - */ -Cypress.on('uncaught:exception', err => { - if ( - err.message.includes( - 'ResizeObserver loop completed with undelivered notifications' - ) - ) { - return false; - } -}); +// Make the CI fail if console.error in tests +const originalConsoleError = console.error; +console.error = (...args) => { + originalConsoleError.call(console, args); + throw new Error( + JSON.stringify({ + message: 'The tests failed due to `console.error` calls', + error: args, + }) + ); +};