Fix/cypress resizeobserver mock#11193
Conversation
AarishMansur
force-pushed
the
fix/cypress-resizeobserver-mock
branch
from
54e66ab to
03da508
Compare
There was a problem hiding this comment.
Pull request overview
This PR improves Cypress test stability by replacing the current suppression of the ResizeObserver loop completed with undelivered notifications error with a dedicated ResizeObserver mock injected before the AUT initializes.
Changes:
- Add a
ResizeObserverMockimplementation for Cypress runs. - Inject the mock via
Cypress.on('window:before:load')and remove the prioruncaught:exceptionsuppression workaround. - Update Cypress TypeScript configuration to include JS files and avoid emitting.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
cypress/tsconfig.json |
Expands TS project scope for Cypress files and disables emit. |
cypress/support/index.js |
Injects the ResizeObserver mock into the AUT window before load. |
cypress/support/ResizeObserverMock.js |
Implements a basic ResizeObserver mock and triggers callbacks asynchronously. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| observe(element) { | ||
| this.elements.add(element); | ||
| this.trigger(); | ||
| window.addEventListener('resize', this.handleResize); | ||
| } | ||
|
|
||
| unobserve(element) { | ||
| this.elements.delete(element); | ||
| } | ||
|
|
||
| disconnect() { | ||
| this.elements.clear(); | ||
| window.removeEventListener('resize', this.handleResize); | ||
| } |
cypress/tsconfig.json
Outdated
| "extends": "../tsconfig.json", | ||
| "compilerOptions": { | ||
| "rootDir": "e2e" | ||
| "rootDir": ".", | ||
| "noEmit": true | ||
| }, | ||
| "types": ["cypress", "node"] | ||
| } | ||
| "types": [ | ||
| "cypress", | ||
| "node" | ||
| ], |
| observe(element) { | ||
| this.elements.add(element); | ||
| this.trigger(); | ||
| window.addEventListener('resize', this.handleResize); | ||
| } | ||
|
|
||
| unobserve(element) { | ||
| this.elements.delete(element); | ||
| } | ||
|
|
||
| disconnect() { | ||
| this.elements.clear(); | ||
| window.removeEventListener('resize', this.handleResize); | ||
| } | ||
|
|
||
| handleResize() { | ||
| this.trigger(); | ||
| } | ||
|
|
||
| trigger() { | ||
| if (this.elements.size === 0) return; | ||
|
|
||
| const entries = Array.from(this.elements).map(e => ({ | ||
| target: e, | ||
| contentRect: e.getBoundingClientRect(), | ||
| })); | ||
|
|
||
| requestAnimationFrame(() => { | ||
| this.callback(entries, this); |
slax57
left a comment
slax57
left a comment
There was a problem hiding this comment.
@AarishMansur Thanks for the PR.
Before reviewing, I first tried to see if I could reproduce the issue (without your fix, i.e. by staying on master and commenting out the content of the cypress/support/index.js file), but couldn't.
Are you able to reproduce the issue on master? If so, can you provide detailed test instructions? What browser are you using? (I tried with electron)
Also, where are the errors supposed to appear: in the terminal or the DevTools console?
Thanks.
Problem
Cypress tests trigger the browser error:
ResizeObserverloop completed with undelivered notificationsThis happens when components using
ResizeObservercause repeated resize cycles in the Cypress environment.The current workaround suppresses this error using
Cypress.on('uncaught:exception'). While this prevents test failures, it hides real issues and reduces the reliability of the test suite.Solution
Replaced the error suppression workaround with a proper
ResizeObservermock.Added a dedicated
ResizeObserverMockutility that:ResizeObserverinterface (observe,unobserve,disconnect)requestAnimationFrameto avoid loopscontentRectvalues viagetBoundingClientRectInjected the mock using
Cypress.on('window:before:load')so it is available before the application initializesRemoved the
uncaught:exceptionhandler that was previously ignoring the errorUpdated Cypress TypeScript configuration to properly support
.jsfiles and prevent emit conflictsThis ensures stable test execution while keeping error reporting accurate.
How To Test
Run Cypress tests:
Verify:
ResizeObserver loop completed...errors appearuncaught:exceptionsuppression is presentAdditional Checks
masterfor a bugfix or a documentation fix, ornextfor a featureFixes : #10649