Oftentimes, the hardest part of using test-driven development, or TDD, is getting started. You’ve got to download packages with weird dependencies, get your test suite working with your build system, and then you have to figure out how to write a test! It’s no wonder that so many developers start running away when you bring it up.
But, you’re no ordinary developer. You’re ready to start using TDD with Vue so you can be confident that your code is working exactly as intended. Together, we’ll get tests working in a new Vue project, walk through the default tests, and then add some of our own.
The Set Up
The easiest way to get up and running with TDD is to use the vue-cli tool. If you haven’t used it already, the vue-cli tool scaffolds a new Vue project for you from the command line.
When you use the vue-cli to scaffold a project, all you have to do is follow the prompts and then tests will automatically be set up for you. How easy is that? Let’s walk through the process so we can see exactly how to do it.
The first step is to install the vue-cli tool if you haven’t already. Using NPM, you can open up your terminal and run
npm install -g vue-cli to install it.
Before we create our project, we need to pick a template. The vue-cli gives us a couple of different template options such as webpack, browserify, pwa, and simple. Each of them has their own unique setups, and I’ll leave it to you to choose the one that suits you best. Do note that the “simple” versions do not include testing. For this tutorial, I’m going to use the webpack template.
Now, navigate to the directory where you want to create your new Vue project. Here you can run
vue init <template-name> <project-name> to scaffold your project. The vue-cli tool will now prompt you with a series of questions about your project, like this:
As you can see, I’ve accepted most of the default scaffolding settings, but I turned off vue-router because we won’t need it. What you pick is up to you, but make sure you enable unit tests!