Goodbye jsdom/happy-dom, hello Vitest Browser Mode!

Transcript

1. Matija Marohnić Goodbye jsdom & happy-dom 👋 Hello Vitest Browser Mode!
2. Who am I? • 13+ ye a rs of frontend development • a lot of open source experience • p a ssion for testing • I just returned from ViteConf
3. Stable! Experimental v4
4. jsdom & happy-dom
5. jsdom & happy-dom • window.m a tchMedi a () ✅ • sh a dow DOM ✅ • Custom Elements ✅ • node.scrollHeight === 0 • IntersectionObserver → stub • ResizeObserver → stub
6. jsdom & happy-dom • extremely c a p a ble DOM emul a tors • v a riety of purposes • testing components is best in a browser
7. Vitest Browser Mode
8. Vitest Browser Mode What is it? • unit tests inside a browser • no more pretending, your tests now know everything • currently supports Pl a ywright a nd WebdriverIO
9. Vitest Browser Mode How do I…? • should be somewh a t f a mili a r to E2E • loc a tors, retry- a bility, a 11y-friendly queries a nd a ctions… • liter a lly uses E2E fr a meworks under the hood
10. Vitest Browser Mode Extensibility • new loc a tors • new comm a nds • new p a ge methods…
11. Vitest Browser Mode vs. E2E testing
12. Vitest Browser Mode • good for testing fr a mework components — render wh a t you need • client side • no routing (work a round: memory router) • f a ster visu a l regression testing • Vitest UI
13. E2E testing • testing full st a ck a pplic a tion f lows • route-b a sed • E2E fr a mework UI, for ex a mple Pl a ywright UI
14. silvenon.com Matija Marohnić • @silvenon.com on Bluesky 🦋 • “silvenon” on GitHub