Testing presentation components visually

on YouTube ↗30m

" summary

Claims a reproducible visual regression pipeline that catches CSS and layout breakage by rendering components in isolation, taking image snapshots and tracking them in source control. Uses Storybook to exercise presentational components, storyshots + Jest to capture and compare screenshots with a configurable percent threshold, and mocks dependencies for containers. Shows the automation steps, the one‑second capture delay for images, how diffs surface unexpected changes and how CI runs flag a failed snapshot so regressions are obvious.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 11:38Gameplay
3. 13:44Structure
4. 15:23Creating a story
5. 15:56Creating a test case
6. 17:17Supplying inputs
7. 18:11Missing inputs
8. 19:16Creating a template
9. 22:30Testing multiple components
10. 24:50Storyshots plugin

" related talks

• 27mVisual UI Testing – Testing the Last MileCraig Cavalier · React Boston 2019
• 21mLet's get visual - Visual testing in your Vue applicationRamona Schwering · Vue.js Nation 2023
• 27mComponent-Driven Development & Visual Test CoverageMichael Shilman · Assert(js) 2019
• 31mContinuous Testing in a DevOps WorldDerek Ross · DevOps World | Jenkins World 2019 San Francisco
• 09mVisual Regression with Puppeteer, Playwright and CypressRainer Hahnekamp · TestJS Summit 2021
• 18mImplementing a Visual CSS Testing FrameworkJessica Dillon · CSSConf Oakland 2014
• 26mVisually Testing Your ComponentsAndrew Knight · Conf42 JavaScript 2022
• 12mAutomation of GUI testing using visual regression testingAudun Wigum Arbo · NDC Oslo 2023