Testing components

Components are at the core Vue.js applications. Writing unit tests for them is straightforward with Vitest. Having tests that exercise the majority of your components gives you confidence that they behave as designed. Ideal unit tests for components run quickly and are simple.

We’ll carry on building the blog application example. We have now built the heading, but a blog usually also needs a list of posts to display.

We’ll create a PostList component. For now, it will just render a div wrapper and support a posts Array prop:

<script setup>
defineProps({
  posts: {
    type: Array,
      default: () => []
  }
})
</script>
<template>
  <div>
  </div>
</template>

We can add some data in the App component:

<script>
export default {
  data() {
    return {
    ...