30-days-cover-image

30 Days of Vue

Introduction to Testing

This post is part of the series 30 Days of Vue.

In this series, we're starting from the very basics and walk through everything you need to know to get started with Vue. If you've ever wanted to learn Vue, this is the place to start!

Newline Image

Introduction to Testing

Test suites are an upfront investment that pay dividends over the lifetime of a system. Today, we'll introduce the topic of testing and discuss the different types of tests we can write.

Okay, close your eyes for a second... wait, don't... it's hard to read with your eyes closed, but imagine for a moment your application is getting close to your first deployment.

It's getting close and it gets tiring to constantly run through the features in your browser... and so inefficient.

There must be a better way...

Testing

When we talk about testing, we're talking about the process of automating the process of setting up and measuring our assumptions against assertions of functionality about our application.

The importance of testing in development can’t be stressed enough. Testing can help reveal bugs before they appear, instill confidence in our web applications, and make it easy to onboard new developers on an existing codebase.

When we talk about front-end testing in the context of Vue, we're referring to the process of making assertions about what our Vue app renders and how it responds to user interaction.

There are two different software testing paradigms that are often done - integration testing, and unit testing.

Integration testing

Integration testing (often labeled as end-to-end testing) is a top-down approach where tests are written to determine whether an application has been built appropriately from start to finish. We write end-to-end tests as though we are a user’s movement through our application.

Though many integration suites exist, Nightwatch is an end-to-end testing suite that is often used with Vue applications. Nightwatch is Node.js based and allows us to write tests that mimic how a user interacts with an application.

Unit testing

Unit testing is a confined approach that involves isolating each part of an application and testing it in isolation (i.e. as a unit). Tests are provided a given input and an output is often evaluated to make sure it matches expectations.

Unit tests typically do not require a browser, can run incredibly quickly (no writing to the DOM required), and the assertions themselves are usually simple and terse.

 

This page is a preview of 30 Days of Vue

Get the rest of this chapter and 330+ pages of Vue instruction for free.

The entire source code for this tutorial series can be found in the GitHub repo, which includes all the styles and code samples.

If at any point you feel stuck, have further questions, feel free to reach out to us by: