How will unit testing looks with Vue 3's Composition API?

To allow users to try the Composition API early, the Vue team released a plugin that lets us try it out in Vue 2. You can find it here.

This is a super quick article verifying how the new Composition API plays with vue-test-utils , the official unit test library for Vue components. Spoiler: it works exactly the same.

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.

Check out my Vue.js 3 course! We cover the Composition API, TypeScript, Unit Testing, Vuex and Vue Router.

The Test Component

Below is the “Hello, World” of the Composition API, more or less. If you don’t understand something, read the RFC or my article or have a Google; there are lots of resources about the Composition API available.

The two things we will need to test here are:

Does clicking the increment button increase state.count by 1? Does the message received in the props render correctly (transformed to upper case)?

Testing the Props Message

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

As expected, this is very simple — regardless of the way we are composing out components, we use the same API and same strategies to test. You should be able to change the implementation entirely, and not need to touch the tests. Remember to test outputs (the rendered HTML, usually) based on given inputs (props, triggered events), not the implementation.

Testing the Button Click

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

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

Conclusion

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 assertions based on inputs and outputs. vue-test-utils doesn’t care how your compose your components; all the existing methods and APIs apply to the Composition API. Great news!

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 implementation, not the output.

While an exciting new feature, the Composition API is entirely additive, so there is no immediate need to use it, however regardless of your choice, remember a good unit tests asserts the final state of the component, without considering the implementation details.