Back Button Testing
Testing Vue

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
10 episodes
2:10:04 hrs
10
Latest Episode in This Series

Added 2 years ago

Cleaner Asynchronous Mocha Tests

In the previous episode, we created a useful assertOnNextTick() helper function to trigger and catch an...

Watch
Testing Vue

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.

Begin
10
Latest Episode in This Series

Added 2 years ago

Cleaner Asynchronous Mocha Tests

In the previous episode, we created a useful assertOnNextTick() helper function to trigger and catch an assertion...
Watch

Your Teacher | Jeffrey Way

https://laracasts.s3.amazonaws.com/avatars/jeffrey-avatar.jpg's avatar
Hi, I'm Jeffrey. I'm the creator of Laracasts and spend most of my days building the site and thinking of new ways to teach confusing concepts. I live in Orlando, Florida with my wife and two kids.
    1. EPISODE 1

      Run Time 11:23

      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.

    2. EPISODE 2

      Run Time 3:15

      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.

    3. EPISODE 3

      Run Time 9:14

      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.

    4. 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.

    5. EPISODE 5

      Run Time 21:14

      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.

    6. EPISODE 6

      Run Time 5:19

      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.

    7. 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.

    8. EPISODE 8

      Run Time 10:11

      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.

    9. EPISODE 9

      Run Time 25:53

      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

      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.