Back Button Testing

Testing Vue

testingvue.com

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.

Advanced
Difficulty
10 episodes
2:10:04 hrs
Start Series

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.

  • 01

    Episode 1 Run Time 11:23

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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.

You May Also Enjoy...

Here are some additional series that may be up your alley.