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!
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.
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.
What do you need to set up to start writing tests? Here's an overview of different tools and what to use them for.
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 👇
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.
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.
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.
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.
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.
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!
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.
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!
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.
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!
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.
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.
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!
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.