A fully fledged webpack configuration can be daunting. Build one from the ground up, learning what each tool does and how they fit together.
Vue 3 introduces a new feature for handling components that load asynchronous data when mounted: Suspense. Learn how Suspense works, and how to test components using the new Suspense feature.
Jest cannot load .vue files by default. Learn how Jest transformers work, and by leveraging Vue's new SFC compiler, write one to which lets use load and test .vue files.
We extend the app build in the previous article, allowing users to persist data to a server using a HTTP request. See what and how the tests need to change, and how we to deal with test suites when an app grows in complexity.
Take a look at what I consider to be best practices when writing tests for Vue components. We will also take a sneak-peak at the new version of Vue Test Utils, built in TypeScript for Vue 3, and some of the new features.
Vue 3 is highly modular, exposing different packages for reactivity, rendering, and runtime. Let’s explore the @vue/runtime-dom package, published as part of Vue 3, and build a custom DOM renderer.
Vue.js 3 gives us two new tools - the Composition API and first class TypeScript support. Let's refactor a class Vue.js 2 component to use TypeScript and the Composition API, and discuss the benefits and shortcomings of the old vs the new.
UI Libraries like Vue and React and their Testing libraries, Vue Test Utils and Enzyme, can seem like “magic” sometimes. Let's remove the magic and abstractions, and build a simple testing library from scratch for Vue 3.
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 reimplement Vuex, this time using Vue 3's newly exposed reactivity APIs.
One common occurrence I’ve observed across large Vue and React apps is that, over time, the UI logic and business logic becomes so entangled that UI changes break the business logic and vice versa. Let’s look at an example of this, and how we can separate the concerns.
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.