Good Tests for Vue Applications

Good Tests for Vue Applications

Chapter 3.5.1: Mastering Component Tests

Learn about the value of Component Tests, how to determine when to write them, and their importance in ensuring robust and reliable applications.

Markus Oberlehner's avatar
Markus Oberlehner
Mar 13, 2023
∙ Paid
1
1
Share

Disclaimer: You are reading an early version of the text! The final version of the book will be revised and may contain additional content.


If we write Application Tests first for all of the new features we want to build, is it necessary to write Component Tests too? Although there is no definitive answer to this, I consider a couple of things when thinking about writing a Component Test or not:

  1. Does the component include complicated, non-domain logic (e.g., accordion, tabs)?

  2. Can a Component Test serve as a stepping stone to fulfilling an extensive Application Test?

  3. Is it necessary to ensure a contract between two or more components?

  4. Is the component important enough that a Component Test can help us improve its design?

We should always begin by writing Application Tests when working on a new feature. These tests ensure that the feature works as expected from the user's perspective, and they are a great way to catch regressions as we continue to build and modify the application. We also rely on Application Tests to ensure that various components work together correctly and that the application behaves as expected. However, once we have completed our Application Tests, it may or may not be worthwhile to write Component Tests too. For example, we should write Component Tests for complicated components resembling non-domain logic, such as accordions or tabs. These tests ensure that each component behaves as expected in isolation and can help us catch problems early without relying on less fine-grained and slower Application Tests.

Complicated, non-domain logic

For every application of a certain complexity, we often need complex base components for UI elements like accordions and tabs. Although we also test those complex UI components indirectly via our Application Tests, creating additional Components Tests for those kinds of components makes a lot of sense.

This article is a part of my book about writing good tests for Vue applications. I try to publish a new article every three weeks. Become a free or paid subscriber to support my work and never miss an article.

Creating Component Tests for components containing complicated non-domain logic is critical because we typically use those components in many parts of our application. When we change such a component, we want to ensure that those changes do not have unintended effects on other parts of our application. By writing Component Tests for these generic and highly reusable components, we can isolate any issues that arise and fix them without relying on slower Application Tests.

Component Tests as a stepping stone on your way of fulfilling an extensive Application Test

Of course, we should always strive to split more extensive features into multiple tiny pieces and set up our Application Tests accordingly. Yet, there will always be situations where we must write a lot of code to fulfill a particular Application Test for an inherently large feature. In cases like this, creating Application Tests along the way makes a lot of sense to ensure we're on the right path.

This post is for paid subscribers

Already a paid subscriber? Sign in
© 2025 Markus Oberlehner
Privacy ∙ Terms ∙ Collection notice
Start writingGet the app
Substack is the home for great culture