Vue Router, Hoisting Mocks and Unit Test Spaghetti
summary
Vest (vtest) hoists mocks and constants so repeated runs with describe.each produce corrupted state and a mysteriously failing second pass, especially when Vue Router is mocked and a component mutates the URL. Reproduce and fix: swap the mock for the real Vue Router initialized in abstract mode and reset router.query/params, deep clone inputs with cloneDeep to avoid shared-object mutation, attach spies to component methods before mount to catch mounted/created calls, and stub window.location/matchMedia or initialize real API client instances when Vuex getters return mocked plain objects — these fixes restore deterministic tests.
AI-written summary · about
chapters (8)
- 0:00Introduction and context
- 2:54Vue Router mock issues
- 7:50describe.each pitfalls
- 14:13Lifecycle hook mocking
- 17:05Mocking window object
- 21:40API client initialization
- 24:48Key takeaways summary
- 26:42Q&A session
related talks
31mNext Level Jest Testing
30mTips, Tricks, and Best Practices
47mMocking in Front-end and Back-end TypeScript Tests
39m7 ways to make your Vue unit tests better
38mComponent wrappers and other patterns for making your tests bulletproof
01h 00mHow does a frontend router work? Deep dive with Vue Router
28mTestable Nuxt
27mTesting vuex