Interaction Testing A Vue.js Application With Vue Test Utils, Jest, & Jest Cucumber

In my last post about Vue testing, we got ourselves bootstrapped and ready to write tests and we wrote a simple test to see if our Vue page was being rendered properly. In this post, we're going to walk through how to do simple interactions with our Vue application using Vue Test Utils, Jest, and Jest Cucumber.

Starting from where we left off in the last post, we are going to write some simple tests which will enter text into an input field, click a button, and check to ensure that our event handler gets executed for the button click. As we did before, we want to write a functional specification FIRST, before we implement our code because that gives us an unmoving target toward which we can aim. Without a test, we might get distracted or code more than we need to. Here's what I wanted in my feature:

Next, we need to wire those business feature specifications into an automated test like so:

Finally, we implement the feature in Vue to satisfy our specification test:

In the next segment about Vue.js, I will show you how to mock Vue properties and do asynchronous tests involving callbacks/promises.