After years of blogging, mainly on Vue.js (favorite framework) and software testing (favorite topic) I am making the jump to video content with my YouTube channel!

So far I have posted two playlists:

If you enjoy my content and teaching style, I also have two full length courses available. You can get $10 off with the promotion code VUEJS_COURSE_10_OFF

In this article, we do a dive into the virtual dom in Vue.js 3, and how we can traverse it with the goal of finding a specific component (or what we will call a vnode - more on this soon).

Most of the time, you don’t need to think about how Vue internally represents your components. Some libraries do make sure of this though — one such library is Vue Test Utils and it’s findComponent function. …

In this article, we build a transformer to change Vue 3 .vue component into a format Jest can understand. This is what vue-jest does, and how Vue Test Utils works. We will do this using a TDD like process: write what we want, and follow the errors to success.

This is available as a screencast, along with other advanced content on my website, Vue.js Course.

Get more screencasts like this here.

Getting Started

So, without further ado, we install jest and write a test:

Running yarn jest at this point This fails - we don't have a Foo.vue. Make one:

Learn some best practices for writing component test, and get a sneak-peak at the new version of Vue Test Utils, built in TypeScript for Vue 3.

To do this, I will be building a simple Todo app, and writing tests for the features as we go.

This article is available as a screencast on my website, as well as many more! You can watch it right here as well:


Getting Started

We get started with a minimal App.vue:

The <template> is currently empty - we will write a failing test before we work on that. Other than that, everything is…

Options Composition API, JavaScript and TypeScript — one API and language to rule them all?

In this article, I will convert Vue.js 3 component built using regular JavaScript and the options API to use TypeScript and the Composition API. We will see some of the differences, and potential benefits.

You can support me by viewing this post on Vue.js Courses, as a screencast and an article.

You can find the source code for this article here.

Since the component has tests, and we will see if those tests are useful during the refactor, and if we need to improve them…

Libraries like Vue and Vue Test Utils seem almost “magic” at first — let’s go beyond the frameworks and abstractions, and build a simple Vue testing framework from scratch.

This article is best enjoyed as a screencast. You can view it either below, or on my website with the relevant show notes. A text version of the article is also available.

A copy of the source code is here.

Vuex icon by Ergenekon Yiğit

Vue 3’s alpha has been out for a while now, however most of the core libraries have not caught up yet — namely Vuex and Vue Router. Let’s implement our own Vuex using the new Vue 3 newly exposed reactivity APIs.

TDD is much easier to follow in a video form — that’s why I’ve made this article available as a screencast on my site! You can also read the text version there.

To keep things simple, we will only implement root level state, actions, getters and mutations - no namespaced modules for now, although I'll provide a hint on…

In complex Vue.js applications, business and UI logic can become so coupled that development slows to a haul — separate your concerns, and avoid the UI/business logic mess before it happens.

This article is available as a screencast.

Screencast version of this article.

Mixed business and UI concerns usually mean the application has poor test coverage — unit tests often force you to keep your business logic and UI logic separate, and not doing so makes testing difficult. …

Available as a screencast on Vue.js Courses!

Reducing boilerplate in your unit tests can improve readability. In this article, we refactor the unit tests for a component using Vuex and VueRouter, and extract a useful utility function that can be used throughout the entire codebase.

This article is available as a screencast on Vue.js Courses.

It is often ideal to start each unit test with a fresh copy of a component. Furthermore, as your apps get larger and more complex, chances are you have a some components with many different props, and possibly a number of third party libraries such as Vuetify, VueRouter and Vuex installed. …

Vue Test Utils uses Flow for type checking. I wanted to know what it would take to move to TypeScript.

Vue Test Utils is the unit testing library for Vue.js. With Vue.js 3 on the horizon, and Vue Test Utils (VTU) still in beta, we are looking to get it over the line into a 1.0 release sooner rather than later. Aside from outstanding issues and open PRs, I’ve been thinking more about the long term maintainability of the library, and other important changes we might want to make prior to hitting 1.0.

One of the main things that comes…

Lachlan Miller

I write about frontend, Vue.js, and TDD on You can reach me on @lmiller1990 on Github and @Lachlan19900 on Twitter.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store