Testing native js web components

on YouTube ↗04m

" summary

Shows how to test native JavaScript web components without a browser by mocking the DOM: jsdom lacks web components support so the solution treats window as an injected third‑party, supplying it via webpack externals, rollup globals or a window.mjs shim. Builds a minimal mock: attachShadow sets shadowRoot to a div and a tiny customElements registry that gets defined then frozen so tests cannot mutate it. Includes runnable examples for Jasmine, Mocha, and Jest with webpack, Rollup and ESM.

AI-written summary · about

" chapters (7)

1. 0:00Introduction
2. 0:28Web Components
3. 0:52Custom Elements
4. 1:14JSM
5. 1:31Window
6. 1:46Webpack
7. 2:16Window MJS

" related talks

• 37mSay No(de) to the Browser: Testing your Webapp Frontend Code Using Just NodeGil Tayar · TestCon Vilnius 2017
• 36mThe Road to Native Web ComponentsMike North · JSConf Colombia 2016
• 42mWorking in the Shadow (DOM) - How to test Web ComponentsDavid Burns · Selenium Conf 2022
• 32mLet's talk about Web ComponentsJemima Abu · React Advanced 2021
• 17mThe jsdomDomenic Denicola · dotJS 2014
• 29mInspector Web and the Mystery of the Shadow DOMAngelina Fabbro · JSConf EU 2012
• 38mCustom Elements EverywhereRob Dodson · Polymer Summit 2017
• 31mNative Web Components - All Frameworks InvitedMichael Collins · UtahJS Conf 2018