Testing with Vite and the Cypress Component Test Runner

on YouTube ↗53m

" summary

Demos a concrete workflow: the Cypress Component Test Runner wired to Vite integration, mounting Vue components and asserting emitted events so a modal is opened filled and saved, with the browser UI available for debugging. Shows mount + assert emitted events, visual playgrounds for permutations, hot-reload caveats (no native HMR yet), CI/dashboard support and code‑coverage report output. Practical, hands‑on evidence that the runner works end‑to‑end rather than high‑level prose.

AI-written summary · about

" chapters (12)

1. 0:00Introduction
2. 3:43Component testing needs visibility
3. 9:01Testing modal with Cypress
4. 14:37Debugging component behavior
5. 25:25Interactive component playgrounds
6. 30:25Vite powers Cypress tests
7. 32:11Key learnings
8. 33:58Future of Cypress testing
9. 41:28CI integration insights
10. 44:58Framework compatibility
11. 49:11Roadmap and contributions
12. 51:20Q&A

" related talks

• 48mComponent Testing with Vite, Vue, and CypressJessica Sachs · Developer Growth Summit 2022
• 22mCypress Component TestingJessica Sachs · ViteConf 2022
• 38mComponent Testing with Vite, Vue, and CypressJessica Sachs · JSWorld Conference 2022
• 31mVueConf US 2021 | Component testing with Vite, Vue, and CypressJessica Sachs · Vueconf.US 2021
• 42mStress-free Testing for VueJessica Sachs · Vueconf.US 2022
• 25mTesting Vue Components with CypressMark Noonan · Vueconf.US 2023
• 05mUsing Cypress to test a Vue Site with Ademola Bhadmus (Pt 1)Ademola Bhadmus · Frontend Nation 2024
• 30mIntroducing Component Testing with CypressJessica Sachs · Vue.js Global 2020