Component wrappers and other patterns for making your tests bulletproof
summary
Guides frontend developers through a concrete pattern that replaces mocking internals with route-level integration: use Vitest and Testing Library, mock only external APIs with MSW, wrap route views in component wrappers to provide routing, state and query contexts, and assert real network requests and UI outcomes. The example reduces a complex page to four test cases (happy path plus three failure modes), keeps refactors safe, and shows a negligible 9 ms wrapper overhead.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 4:59Automated frontend testing matters
- 13:26Testing mistakes and pitfalls
- 21:05Island architecture pattern
- 26:01Component wrappers for tests
- 31:21Testing external integrations
- 34:13Happy and negative paths
- 36:19Why this approach works
- 37:42Q&A
related talks
30mTips, Tricks, and Best Practices
24mComponentizing end-to-end tests
24mWriting Good Tests for Vue Applications
01h 02mWriting better tests for your JavaScript app
30mIntroducing Component Testing with Cypress
19mModern Testing Strategies for Reactive Applications
26mUnit testing Vue components Why test, what to test, and how to test Vue components
39m7 ways to make your Vue unit tests better