Fix: Vitest, the "window.getComputedStyle" error is not defined when running tests #32062
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes a Vitest error that occurs when window.getComputedStyle is not defined during test execution. The fix adds defensive checking to prevent runtime errors in test environments where this browser API may not be available.
Key Changes:
- Added null check for
window.getComputedStylein thereadThemeMarkerfunction to return null gracefully when the API is unavailable - Added comprehensive test coverage for the error handling scenario with two test cases
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/devextreme/js/__internal/ui/themes.ts | Added defensive check to return null when window.getComputedStyle is undefined, preventing runtime errors |
| packages/devextreme/testing/tests/DevExpress.ui/themes.tests.js | Added new test module with two tests to verify proper handling when getComputedStyle is unavailable |
| test('readThemeMarker returns null when getComputedStyle throws an error', function(assert) { | ||
| const done = assert.async(); | ||
| const originalGetComputedStyle = window.getComputedStyle; | ||
| window.getComputedStyle = undefined; | ||
|
|
||
| try { | ||
| themes.resetTheme(); | ||
| const value = themes.current(); | ||
| assert.strictEqual(value, null, 'current() returns null on getComputedStyle being undefined'); | ||
| } finally { | ||
| window.getComputedStyle = originalGetComputedStyle; | ||
| done(); | ||
| } | ||
| }); |
There was a problem hiding this comment.
The first test is synchronous and does not need assert.async(). The test immediately executes the try-finally block and restores the original getComputedStyle before any asynchronous operations occur. Remove the done variable and the done() call since no asynchronous operations are being performed.
| }); | ||
| }); | ||
|
|
||
| QUnit.module('readThemeMarker error handling', () => { |
There was a problem hiding this comment.
The module definition should include a hooks parameter to allow proper cleanup of window.getComputedStyle in case tests fail. This ensures the original getComputedStyle is always restored, preventing potential interference with other tests. Consider adding a hooks.afterEach to guarantee restoration.
| QUnit.module('readThemeMarker error handling', () => { | |
| QUnit.module('readThemeMarker error handling', (hooks) => { | |
| const originalGetComputedStyle = window.getComputedStyle; | |
| hooks.afterEach(() => { | |
| window.getComputedStyle = originalGetComputedStyle; | |
| }); |
1 participant
No description provided.