Find the Vue.js 2 version .

Vue 3 introduced a new API for create components - the Composition API.

Testing a component build with the Composition API should be no different to testing a standard component, since we are not testing the implementation, but the output (what the component does, not how it does it). This article will show a simple example of a component using the Composition API in Vue 2, and how testing strategies are the same as any other component.

The source code for the test described on this page can be found .

The two things we will need to test here are:

1. Does clicking the increment button increase by 1?

Testing the message is correctly rendered is trivial. We just use props to set the value of the prop, as described here.

Writing a test to ensure clicking the button increments the is equally simple. Notice the test is marked async; read more about why this is required in .

Again, entirely uninteresting - we the click event, and assert that the rendered count increased.

The article demonstrates how testing a component using the Composition API is identical to testing one using the traditional options API. The ideas and concepts are the same. The main point to be learned is when writing tests, make asserions based on inputs and outputs.

It should be possible to refactor any traditional Vue component to use the Composition API without the need to change the unit tests. If you find yourself needing to change your tests when refactoring, you are likely testing the implmentation, not the output.