Testing Vue Components with Cypress
summary
Practical demo of Cypress component testing for Vue shows how to mount components, run seven failing specs, and fix them live. Examples include a paragraph rendering as a div, a clickable div replaced with a real button for accessibility, CSS units changed from vw to rem to meet a font-size assertion, stubbing network responses with intercept to stub Star Wars API, and removing an Emojisplosion call so the loading state appears — all tests rerun and end up green.
AI-written summary · about
chapters (5)
- 0:00Intro
- 0:53I have 7 failing component tests
- 5:12What is Cypress?
- 9:52Ok, back to fixing components
- 21:28Component tests are neat!
related talks
48mComponent Testing with Vite, Vue, and Cypress
30mIntroducing Component Testing with Cypress
50mTest Driven Development in Vue with Cypress
05mUsing Cypress to test a Vue Site with Ademola Bhadmus (Pt 1)
42mStress-free Testing for Vue
53mTesting with Vite and the Cypress Component Test Runner
38mComponent Testing with Vite, Vue, and Cypress
22mCypress Component Testing