7 ways to make your Vue unit tests better
summary
Advocates switching back to Vue Test Utils (VTU) over Testing Library for Vue specifics, uses data-test-id attributes and small finder helpers, and prefers shallowMount not mount so parent tests treat children as black boxes. Tests assert rendered HTML, emits, and mocked API calls (checks that the mock was called), avoid wrapper.vm introspection, use input helpers like setValue + await nextTick, make tests fail before passing, and use coverage lines to spot untested branches.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:27Unit tests matter
- 3:57Component output
- 7:12Test coverage structure
- 10:06Data test IDs
- 14:02Avoid internals
- 17:49Shallow vs full mount
- 21:01Disabled states
- 24:19Fail tests early
- 27:19Mock API calls
- 29:46Resilient tests
- 31:13Unit vs E2E trade-offs
- 32:40Data test IDs in code
- 34:06Testing resources
- 35:31What to test
- 36:35Test helpers
- 37:40AI tools for testing
related talks
23mSeven ways to make your Vue component tests better
28mBuilding Test Strategy for Vue.js application
30mTips, Tricks, and Best Practices
25mThe Future of Vue's Test Utils
24mWriting Good Tests for Vue Applications
26mUnit testing Vue components Why test, what to test, and how to test Vue components
21mTesting Vue Apps
31mNext Level Jest Testing