feat(presentation): add Vitest with jsdom support for Shadow DOM testing - #10568
Draft
deleonio wants to merge 1 commit into
Draft
feat(presentation): add Vitest with jsdom support for Shadow DOM testing#10568deleonio wants to merge 1 commit into
deleonio wants to merge 1 commit into
Conversation
Contributor
|
🚀 Preview deployed to GitHub Pages: https://public-ui.github.io/kolibri/pr-10568/c0c28b0/ |
Contributor
Author
|
Hallo @mluzyna, bitte schaut Euch das mal an: https://github.com/public-ui/kolibri/pull/10568/changes |
Contributor
|
Netlify Draft Deployment |
deleonio
added
the
release:sample
Contributor
|
All contributors have signed the CLA ✍️ ✅ |
Contributor
📸 Visual Test Reports
Run: https://github.com/public-ui/kolibri/actions/runs/30512177145 |
Vielen Dank für die Erklärungen, das hilfreiche Beispiel sowie die wertvollen Hinweise und Tipps. |
This commit adds a working Vitest setup with jsdom to the presentation app, demonstrating how to test KoliBri components with Shadow DOM. **Problem Solved (Issue #10543):** The original issue reported: 'TypeError: Cannot convert undefined or null to object' at @stencil/core/internal/client/index.js:665:7 when using jsdom with KoliBri. **Root Cause:** Stencil tries to access Object.getOwnPropertyDescriptor(win.document.adoptedStyleSheets, 'length') but adoptedStyleSheets is undefined in jsdom, causing the error. **Solution:** Added comprehensive polyfills in setup.ts: - adoptedStyleSheets: Mock array to prevent the error - customElements: Full mock implementation for jsdom - HTMLDialogElement: Polyfill for missing DOM element - MutationObserver: Polyfill for Stencil's observer usage - ResizeObserver: Polyfill for Stencil's observer usage **Files Added:** - vitest.config.ts: Vitest configuration with jsdom environment - src/test/setup.ts: Polyfills and custom element registration - src/test/shadow-dom.spec.tsx: Test suite demonstrating Shadow DOM access **Files Modified:** - package.json: Added Vitest, jsdom, and testing dependencies - tsconfig.json: Added Vitest type support - vite.config.ts: Added basic test configuration **Test Results:** - 11/13 tests passing - Original error from #10543 is resolved - Custom elements are successfully registered - Shadow DOM can be accessed in tests
deleonio
force-pushed
the
vibe/vitest-shadow-dom-2c73fe
branch
from
July 30, 2026 03:48
9b4c547 to
1e6afc3
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds a working Vitest setup with jsdom to the presentation app, demonstrating how to test KoliBri components with Shadow DOM.
Problem Solved (Issue #10543)
The original issue reported:
TypeError: Cannot convert undefined or null to objectat@stencil/core/internal/client/index.js:665:7when using jsdom with KoliBri.Root Cause
Stencil tries to access:
But
adoptedStyleSheetsis undefined in jsdom, causing the error.Solution
Added comprehensive polyfills in
src/test/setup.ts:adoptedStyleSheets: Mock array to prevent the errorcustomElements: Full mock implementation for jsdomHTMLDialogElement: Polyfill for missing DOM elementMutationObserver: Polyfill for Stencil's observer usageResizeObserver: Polyfill for Stencil's observer usageFiles Added
vitest.config.ts: Vitest configuration with jsdom environmentsrc/test/setup.ts: Polyfills and custom element registrationsrc/test/shadow-dom.spec.tsx: Test suite demonstrating Shadow DOM accessFiles Modified
package.json: Added Vitest, jsdom, and testing dependenciestsconfig.json: Added Vitest type supportvite.config.ts: Added basic test configurationTest Results
Usage
To run the tests:
Notes
Closes #10543