Find the Vue.js 3 version .

Vue 3 will introduce a new API for create components - the Composition API. To allow users to try it out and get feedback, the Vue team released a plugin that lets us try it out in Vue 2. You can find it .

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 here.

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 propsData to set the value of the prop, as described .

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 Simulating User Input.

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.