Unit testing Vue components Why test, what to test, and how to test Vue components
summary
Shows concrete, reproducible tests for a modal: using Jest + vue-jest + babel-jest to compile single-file components, mounting with vue-test-utils mount and wrapper.html, asserting wrapper.empty, using jest.fn() mocks for an onClose click and passing slot content, plus snapshot tests with vue snapshot serializer. Notes a performance finding — some runners do 5,000 tests in 38s vs >1h when compilation caching is wrong — and recommends using CLI patterns or webpack for predictable results.
AI-written summary · about
chapters (12)
- 0:00Start
- 3:33Unit test benefits
- 6:18compiled SFC
- 6:34Compilation process
- 7:46Compilers
- 10:59mount
- 12:01Component contract
- 13:02Input
- 14:18Modal component
- 19:38Snapshot tests
- 21:19First run
- 22:51Overwrite snapshot
related talks
21mTesting Vue Apps
31mNext Level Jest Testing
23mSeven ways to make your Vue component tests better
30mTips, Tricks, and Best Practices
39m7 ways to make your Vue unit tests better
28mBuilding Test Strategy for Vue.js application
39mSpeed up your unit testing with Jest
24mWriting Good Tests for Vue Applications