Getting started with Vue.js Testing: Your Resource Guide

First things first: We're not going to teach you much about Vue.js Testing in this article. There are of people that can do that way better than we ever could.

But we will point you towards those worth listening to.

So, if you're still new in the Vue-niverse or just eager to finally start writing tests for your apps – don't worry. These resources will bring you up to speed on test-driven development in no time!

Why Testing?

Before we dive in, just a short recap of why we think testing is important.

Testing helps you make sure all parts of your app work as expected. It gives you the confidence to ship often while being able to refactor later knowing you won't break anything.

It also improves the quality of your code and works as documentation. But while these are totally valid reasons to test as well, we'd rather highlight developer confidence – it's really the key thing (for us).

There are several types of tests.

  • Unit tests – the smallest tests of single units (one assertion per test for one component)
  • Integration tests that help see if the units work together
  • End-to-end tests which basically simulate the experience real user of your app

Sounds like a lot of work, huh? Do you really need this for every project? Well, let us put it this way: We often don't start writing tests for our side projects right away and yes, we always regret it later 🤷‍♂️

If you want to read up about this and get a grasp on which tests to focus on, check out this oldie-but-goldie article about the testing pyramid by Google. As always, don't take that as ultimate truth and decide for yourself. There are also other opinions on which tests to focus on – read f.ex. Write tests. Not too many. Mostly integration by Kent C. Dodds.

Anthony Gore also wrote an article about Knowing What to Test, where he states that developers usually err on the side of testing too much once they got started with writing tests. So, it's definitely important to think about which tests you're going to invest in for your specific project.

Vue.js Testing Tools

What do you need to set up to start writing tests? Here's an overview of different tools and what to use them for.

vue-test-utils

This is your starting point. vue-test-utils is the official library for (unit) testing your Vue components. It works with any of the test runners below (and also others!). If you use vue-cli, it can set your project up for unit tests with vue-test-utils – and also configure a testing framework like Jest 👇

vue-test-utils The official unit testing utility library for Vue.js
icon-eye-dark Created with Sketch. 3.397

Jest (Unit Tests)

Jest is one of the most popular JavaScript test frameworks. It's designed to need as little configuration as possible and easy to set up. Many tutorials and courses start with teaching you how to write tests with Jest, as it's really approachable for beginners.

It also does useful things like Snapshot testing that lets you test unexpected changes in your UI.

Jest is developed by Facebook, so it's often connected to React in people's head – but it's a universal platform adapting to all JS libraries.

Mocha (Unit Tests)

A framework just as fine as Jest is Mocha. It is super flexible and therefore maybe a bit more complex to set up.

There are a lot of tools and support available to help you set up your tests exactly as you want. Does it do things like snapshot testing as well? Yes, but you have to set it up separately.

Cypress (End-to-End Tests)

Different to Jest or Mocha, Cypress does not focus on unit testing. While not totally excluding them from their scope, they want to make writing end-to-end tests easier and faster.

E2E (end-to-end) tests have always a bit of a hassle to create, so we love this value proposition! There's a special sense of security you get from (visually) seeing a process work from a user's perspective.

What about the other tools?

There are of course a lot more tools around. But these are the main frameworks used in most tutorials, courses and books, so we'd recommend starting with looking into them.

Video Courses

Testing Courses on Vue School

Vue School offers 3 different courses with a total of 30 lessons and over 130 minutes of material. They're all taught by Roman Kuba. The course about testing fundamentals is free, so you can peek into it.

Vue School Vue.js Course Platform
icon-eye-dark Created with Sketch. 10.253

Unit Testing on Vue Mastery

This course is specifically for unit testing (and not touching E2E or integration tests). It has just started, so new videos will be shared regularly between February and April 2020.

You can watch and read the introduction about What to test for free, and sign up to access the whole course!

Testing Vue on Laracasts

We probably don't have to point out that Laracasts is a valuable learning resource. This course makes the most sense for you if both Laravel & Vue are part of your stack.

The lessons are on an advanced level, as they are super hands-on and teach you how to use TDD on a practical level.

Enterprise Vue by Anthony Gore

This course is not only about testing, but about best practices to create high-performance apps that are stable and easy to maintain. As testing is key for that, Anthony Gore is talking about Unit and E2E testing as well.

It's a course for advanced Vue.js developers, but you don't need advanced knowledge about testing.

Enterprise Vue will be updated once Vue 3 is out, so it will stay on top of current best practices. Beware: There's a waiting list, so you can't just sign up at any time!

Testing Javascript by Kent C. Dodds

This video course is taught by Kent C. Dodds, the creator of the DOM Testing Library, available for many different JS frameworks. It's for anyone new to JS testing.

Disclaimer: This is not a Vue-specific course. But it's showing you the fundamentals of testing, and has a whole chapter on how to write tests for any JS framework.

The person using your application components shouldn't have to know or care what framework(s) you used to write your application. Guess what: Neither should your tests.
Kent C. Dodds
Author of Testing JavaScript

That said, there are some examples featuring React in that course, so you'll have to decide if that's for you. But we can only recommend listening to Kent for advice about testing!

Vue.js Course by Lachlan Miller

Lachlan Miller is already recording screencasts and a course that show you how to test with Vue.js 3! He's an active maintainer of vue-test-utils. This is a space you want to keep watching, as his course is not yet available.

In the meantime, check out his articles on Medium.

(Free) Books

Testing Vue.js Applications by Edd Yerburgh

Edd Yerburgh is the creator of vue-test-utils, so you bet he knows what he's talking about. This book shows you different testing methods and best practices (that are not only applicable to Vue testing), and also guides you through creating tests for an app yourself with Jest.

Testing Vue.js Applications Testing Vue Components, Methods, Events & Output
icon-eye-dark Created with Sketch. 933

Vue Testing Handbook by Lachlan Miller

The author of this free (e)Book is also actively maintaining the official vue-test-utils library – we also mentioned his screencasts and video course above 👆. Lachlan Miller focuses more on giving you examples on how to test Vue components.

If you want to get your hands dirty quickly, give it a read!

Vue Testing Handbook Guide on Testing Vue Components
icon-eye-dark Created with Sketch. 620

Testing Vue.js Components with Jest by Alex Jover Morales

This book by Alex Jover Morales gives you an overview of testing styles and how to set up your test suite. It focuses on testing with Jest and its features, including snapshot testing.

Testing Vue.js components with Jest ​Practical Guide to Testing Vue.js Components
icon-eye-dark Created with Sketch. 1.914
Similar Articles
Best Vue.js Datepickers
06.02.2020  •  in #UI Components
Why create a custom DatePicker yourself, if there are so many really great Vue.js components already? We've collected our favourite DatePickers based on whether they are well maintained, easy to use, look nice and provide a good UX. This list will gr...
#intervue: Stefan Rasmussen, Creator of a Vue.js Website Builder that builds Vue.js Websites 🤯
10.05.2019  •  in #Intervue
Our #intervue series continues with an interview with Stefan Rasmussen, creator of grid.studio! This tool is a total Vue-ception: It's a website builder built with Vue.js that lets you build Vue.js websites with a drag'n'drop editor!
COMMUNITY SPONSORS