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.
So, without further ado, we install
jest and write a test:
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:
We get started with a minimal
<template> is currently empty - we will write a failing test before we work on that. Other than that, everything is…
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.
A copy of the source code is here.
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.
To keep things simple, we will only implement root level
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.
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. …
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…