Component Testing with Vite, Vue, and Cypress

on YouTube ↗48m

" summary

Demo shows a Vite + Vue workflow using Cypress component testing where components are mounted instead of visited pages, letting tests interact with live DOM and devtools. The Cypress 10 UI opens projects and runs component specs (tabs, a stepper, a Vuetify canvas, a radio) and supports prop-level and network-level mocks with Faker for fake data. Example radio tests assert label slot/prop and a disabled radio remains unclickable, and the interactive playground reliably reproduces behaviors.

AI-written summary · about

" chapters (15)

1. 0:00Host intro
2. 1:56Speaker's intro
3. 3:35Agenda
4. 5:47Why test?
5. 9:53Testing types
6. 11:25Characteristics of an E2E test
7. 13:12Integration test
8. 14:37Component test
9. 18:53Cypress intro
10. 21:37Cypress 10 UI tour
11. 25:28Component testing example (Tabs)
12. 28:47Short Q&A
13. 31:16Vuetify example (canvas component)
14. 34:05Example (radio component)
15. 46:15Resources & closing

" related talks

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