Introducing Component Testing with Cypress
summary
Introduces a Cypress component testing library that provides a mount function with the Vue Test Utils wrapper, bundles components with webpack, and runs tests in real browsers (Chrome/Firefox/Electron headless) so styles, router links and transitions work without polyfills. Features include network stubbing across plain objects, Mirage or express-style handlers, a visual pause/debug workflow and hot-editing of CSS — demo uses a crossword app, shows transitions succeeding, a skeleton loader implemented after fixing a CSS class, and notes the project is alpha with a Vue CLI plugin and routing/bundling work ongoing.
AI-written summary · about
chapters (16)
- 0:00Start
- 3:17Cyprus Does a Stellar Job at Testing in Real Browser Environments
- 4:26What Is the Cypress Component Testing Library
- 4:44What Is the Cypress Component Testing Library
- 7:36Mocking Support
- 12:46Chrome Debugger
- 13:25Third Party Element Explorer
- 16:36Context Switching
- 19:50Browser-Based Component Testing
- 20:43Demo
- 23:03Test Code
- 24:05Workflow
- 24:28Speed Coding
- 25:14Visual Debugging
- 27:22Component Testing Should Be in the Browser
- 27:47What's Next for the Cypress Component Testing
related talks
25mTesting Vue Components with Cypress
48mComponent Testing with Vite, Vue, and Cypress
38mComponent Testing with Vite, Vue, and Cypress
22mCypress Component Testing
15mCypress Component Testing - Lightning talk
42mStress-free Testing for Vue
50mTest Driven Development in Vue with Cypress
53mTesting with Vite and the Cypress Component Test Runner