Cypress Component Testing - The Disappearance of Mr. Button
summary
Demos a concrete workflow for finding a disappearing button by switching from jsdom + testing-library + just-preview to Cypress Component Testing that mounts a single Angular component, uses injectable fakes over network stubs for domain services, and runs visual Percy snapshots for regressions. Shows the real failures: jsdom lacks CSS layout so flex-basis hides the button, just-preview helps debug but styles must be loaded, Cypress’s actionability detects covered elements, and component tests speed up iteration while avoiding full-app flakiness.
AI-written summary · about
chapters (10)
- 0:00Introduction and testing
- 2:45Debugging the disappearing
- 5:42Identifying code issues
- 9:34Browser-less testing tools
- 14:39Visualizing Dom state
- 18:03Handling flexbox issues
- 22:38Introduction to Cypress
- 26:57Component testing setup
- 32:28Visual regression testing
- 36:53Testing best practices
related talks
15mCypress Component Testing - Lightning talk
19mWhy you should Jest use Cypress for React component testing
23mGaining Confidence with Cypress Tests
30mIntroducing Component Testing with Cypress
42mFunctional and Visual Testing for Web Applications
25mTesting Vue Components with Cypress
45mCypress: Testing without Selenium, Part 1
34mI See What is Going on: Visual Testing for Your Components