Testing Vue

TDD Your First Vue Component From Scratch

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.

Test Single File Components

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.

Setting Data and Asserting Styles

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.

Implementation Details Versus Rendered Output

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.

Asserting Emitted Events

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

Hooking Into Laravel Mix

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.

TDD a Question Component With Helper Functions

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.

Mocking Axios Calls

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.

Testing Asynchronous Actions and Timers

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.

Cleaner Asynchronous Mocha Tests

View the source code for this episode on GitHub.