Reinforcing your blocks: A practical guide to UI component testing
summary
Shows how to use Storybook to render components in isolation, capture hard-to-reproduce states (loading, long lists) and publish static docs, and how addons like knobs, a11y color-blind filters, actions and docs expose props and interactions. Demonstrates automated tests with Jest + Testing Library: render, queryByText, fireEvent, and mock functions to assert visibility and that an action is called exactly once (toBeVisible, toHaveBeenCalledTimes(1)). Emphasizes making assertions user-focused and integration tests for more value.
AI-written summary · about
chapters (7)
- 0:00Start
- 0:59Diego Hernandez
- 3:41Manual Testing
- 20:39Assertion
- 25:46Test Them on a Variation
- 26:34Mock Function
- 29:47Test Integrations between Components
related talks
24mCost-Effective Testing with Storybook and Playwright in Vue Applications
21mTest your UI in the REAL Browser
27mComponent-Driven Development & Visual Test Coverage
18mStorybook and Testing
24mUsing React Testing Library to Write Stronger Tests
09mElemental Testing My Dear Watson - Unit Tests for UI Components
30mTesting presentation components visually
39mTesting, Testing, 1, 2, NaN