Testing Vue
How in the world are we supposed to unit test Vue components? Is it even possible? Why, yes. Yes it is! I'll show you the full process, step by step. Not only will you learn the necessary tooling, but we'll also review the ins and outs of testing your client-side code.
Have you ever wanted to use TDD for your Vue components? I'll show you how.
Series episodes
TDD Your First Vue Component From Scratch
11m 23sStart TDD with Vue by building your first component using vue-test-utils. Follow this friendly guide to set up dependencies and write effective tests from scratch.
Test Single File Components
3m 15sLearn to test single-file Vue components by pre-compiling .vue files with webpack. Follow this friendly guide to level up your Vue testing workflow.
Setting Data and Asserting Styles
9m 14sLearn to set component data with setData() and assert inline styles using hasStyles() for effective, clear Vue tests. Boost your testing skills with this friendly guide.
Implementation Details Versus Rendered Output
15m 37sExplore when to test implementation details versus rendered UI output. Learn friendly, practical tips to write effective, maintainable tests with confidence.
Asserting Emitted Events
21m 14sLearn to assert emitted events in Vue by building a CouponCode component with TDD. Follow this friendly guide to master event testing from scratch.
Hooking Into Laravel Mix
5m 19sLearn how to hook into Laravel Mix’s webpack config and set up a fresh Laravel Vue testing workflow from scratch in this clear, friendly tutorial.
TDD a Question Component With Helper Functions
19m 13sBuild a reusable question component with TDD, using helper functions like see(), click(), and type() to make your tests clear and easy to read.
Mocking Axios Calls
10m 11sLearn how to easily mock Axios calls in Vue using Moxios. Explore practical testing techniques to handle AJAX requests with confidence and simplicity.
Testing Asynchronous Actions and Timers
25m 53sTest async actions and timers: learn practical techniques for reliably testing dates, intervals, and time-based code with clear examples.
Cleaner Asynchronous Mocha Tests
8m 45sSimplify Mocha tests with async/await: learn how asynchronous functions cleanly handle Vue's nextTick and streamline assertions.
