Component testing with Vitest
summary
Shows using Vitest + Vue Test Utils to test a small movie-search component split into two composables: useMovies (fetches data) and useSearch (filters by term). Tests mock network calls with mocked global.fetch with vi.fn, use flushPromises and createApp to mount and unmount, and one composable test fits in 52-line composable test. Migration from Jest keeps ~90% of syntax, coverage uses vitest-coverage/Istanbul and the demo project reports ~50% while team targets 90% coverage target.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 0:44Testing matters and pyramid
- 4:20Frustrations with tests
- 6:12Planning effective testing
- 8:41Vitest for component testing
- 12:41Demo: Movie search test
- 15:30Testing composable functions
- 18:06Mocking async data fetching
- 20:16Sanity testing UI
- 22:46Generating test coverage
- 24:12Maintainable test practices
- 25:39Accessibility in unit tests
- 26:40Q&A
related talks
41mWe may not need component (unit) testing
26mWe May Not Need Component Testing
28mTestable Nuxt
26mUnit testing Vue components Why test, what to test, and how to test Vue components
21mTesting Vue Apps
48mComponent Testing with Vite, Vue, and Cypress
31mNext Level Jest Testing
23mSeven ways to make your Vue component tests better