Vue.js 3 Course - Composition API, TypeScript, Testing

CRANK

In this article, we will 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.To do this, I will be building a simple Todo app, and writing tests for the features as we go.Getting StartedWe get started with a minimal App.vue:<template> <div> </div> </template> <script lang="ts"> import { ref } from 'vue' export interface Todo { id: number text: string completed: boolean } export default { setup() { const todos = ref<Todo[]>([ { id: 1, text: 'Learn Vue.js 3', completed: false } ]) return { todos } } } </script>The <template> is currently empty - we will write a failing test before we work on that. Other than that, everything is pretty standard - since we are using TypeScript, we are able to type the ref using a Todo interface, which makes the content of a Todo much more clear to the read…