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.

Start Series

Share this series on:

  • 01

    Episode 1 Run Time 11:23

    TDD Your First Vue Component From Scratch Free

    Let's dive in. We'll begin by pulling in all necessary dependencies. Most importantly, we'll be leveraging vue-test-utils, which is the official unit testing library for Vue. Once everything has been installed, we can begin using TDD to build a simple Vue component.

    View the source code for this episode on GitHub.

  • 02

    Episode 2 Run Time 3:15

    Test Single File Components Free

    It took a bit of work to setup the necessary dependencies, but we're now successfully testing our Vue components. In this episode, we'll take things a step further and switch over to testing single-file Vue components. To allow for this, we'll need to use webpack to pre-compile these .vue files.

    View the source code for this episode on GitHub.

  • 03

    Episode 3 Run Time 9:14

    Setting Data and Asserting Styles Free

    When preparing your tests, you'll often want to first set the stage. "Given that the component's data is in this state, when I...". To allow for this, we can use the setData() method on the wrapper instance. Additionally, we can use hasStyles() to write assertions against any relevant inline CSS styles. This can be useful for asserting against visibility.

    View the source code for this episode on GitHub.

  • 04

    Episode 4 Run Time 15:37

    Implementation Details Versus Rendered Output Free

    When preparing your tests, you'll often hit a fork in the road. "Do I write my insertions against the underlying implementation and data? Or do I limit my assertions against the rendered UI output? Let's talk about it.

  • 05

    Episode 5 Run Time 21:14

    Asserting Emitted Events Free

    We can easily make assertions against emitted events. To illustrate the basic workflow, let's construct a CouponCode Vue component from scratch using TDD.

    View the source code for this episode on GitHub.

  • 06

    Episode 6 Run Time 5:19

    Hooking Into Laravel Mix Free

    So far, we've been using an incredibly basic webpack.config.js file. But, this being Laracasts, it's very possible that you use Laravel Mix. If that's the case, is there a way to hook into Mix's webpack configuration file? Of course! To illustrate this workflow, let's create a fresh installation of Laravel and and setup a Vue testing workflow from scratch.

    View the source code for this episode on GitHub.

  • 07

    Episode 7 Run Time 19:13

    TDD a Question Component With Helper Functions Free

    Let's review a new example in this lesson. We'll use TDD to build a generic "question" component. Along the way, we'll extract a handful of helper functions, such as see(), click(), and type(). You'll find that this drastically improves the readability of our tests.

    View the source code for this episode on GitHub.

  • 08

    Episode 8 Run Time 10:11

    Mocking Axios Calls Free

    How do we handle Vue components that make AJAX requests with Axios? Well, there are a number of options. We could set up a fake Sinon.JS server, or we could replace the axios dependency entirely with the test double library. A third option, which we'll review in this episode, is to use Moxios, a first-party library for mocking Axios requests.

    View the source code for this episode on GitHub.

  • 09

    Episode 9 Run Time 25:53

    Testing Asynchronous Actions and Timers Free

    How do we go about testing code that makes use of dates and intervals? It can get rather tricky, if you're not sure what you're doing. Let's run through an example to illustrate the exact workflow you can expect.

    View the source code for this episode on GitHub.

  • 10

    Episode 10 Run Time 8:45

    Cleaner Asynchronous Mocha Tests Free

    In the previous episode, we created a useful assertOnNextTick() helper function to trigger and catch an assertion after Vue has performed its next "tick." However, Mocha allows for using asynchronous functions instead. Let's review that approach, and how it can drastically clean up and simplify our tests.

    View the source code for this episode on GitHub.