O'Reilly logo
live online training icon Live Online training

Testing Vue.js Applications

On the road to building confident and scalable apps using Vue

Raju Gandhi

However awesome our application may be, our users are only delighted when it works. While it is easy to build a Proof-of-Concept or a Minimum-Viable-Product without much testing, any long term project mandates that we test our code, at multiple levels. Vue.js indeed makes the journey of building our applications easy and fun. However, testing Vue applications requires us to understand and use a slew of other tools that allow for unit testing our components, integration testing the reactive nature of Vue, as well as end-to-end testing. No true frontend application is complete without routing, and we need to test those too, right? For larger applications, all too often, state management becomes a chore, mandating the use of a library like Vuex that allows us to make state management predictable. Vuex supports the idea of mutations and actions, and we must ensure that we test all of our interactions with Vuex.

Testing is an integral part of any development effort, and in this hands-on training we will take a look at the tools that we can use to test our Vue applications, as well as the routing and state management aspects of our application.

In this session we will take a look at the tools and techniques that allow us to test our Vue.js applications, at all levels, including unit testing, integration testing as well as end-to-end testing. By the end of this session you will have a strong grasp of how we can build confidence in our code base, while writing a test suite that is easy to maintain and that grows as our application grows.

What you'll learn-and how you can apply it

By the end of this live, hands-on, online course, you’ll understand:

  • The separate tools that make up the Vue.js testing ecosystem
  • How to write unit/integration/end-to-end tests for your Vue.js applications
  • How to set up your editor to automatically format your code and report linting/test errors

And you’ll be able to:

  • Write tests that focus on testing your applications functionality
  • Assess other tools that might lend themselves to making writing tests easier
  • Better leverage tools like VS Code to provide faster feedback during

This training course is for you because...

  • You are a developer working on an existing Vue application, and wish to improve the confidence in the existing code-base using a suite of tests
  • You are a developer who is exploring the Vue ecosystem, and wishes to understand what kind of testing facilities are available, and compare and contrast that with other frameworks and libraries like React and Angular

Prerequisites

  • The basics of Vue, including how components, and inter-component communication work in Vue
  • An understanding of Vuex and Vue Router and how they work

Recommended preparation:

Recommended follow-up:

About your instructor

  • Raju Gandhi is a programmer, consultant, speaker, trainer, and all-around nice guy. He has worked in the software industry for over 15 years and has experience in both government and private sectors. Raju is a practitioner of both Agile and DevOps methods as well as good programming and architectural patterns and believes that finding the right balance between such practices will allow us to deliver software that our customers cherish. He is also a strong advocate of functional programming and a proponent of immutability across both software and hardware. Raju is a regular speaker at conferences around the country (and occasionally around the world) and has routinely participated in the No Fluff, Just Stuff tour. In his spare time, you will find Raju reading, playing with technology, or spending time with his wonderful (and significantly better) other half.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Checking your Vue.js application (15 min)

  • EditorConfig setup (Presentation)
  • Linting setup (Presentation)
  • Enabling editor settings to report linting/testing errors as well as automatically formatting your code

Testing — The What/Why/How (10 minutes)? - Why test? (Presentation) - What should we be testing? - Different kinds of tests and the acceptable ratio (Presentation) - Q&A (Discussion)

Testing Vue.JS Components (25 min)?

  • Introduction to jest and vue-test-utils and setting up testing infrastructure our application (Exercise)?
  • Testing a SFC (Single File) component method(Exercise)
  • Testing the methods/computed properties of a component (Exercise)
  • Testing props and events (Exercise)?
  • Q&A (Discussion)
  • Break (10 min)?

Integration testing Vue.js components and component hierarchies

  • Testing parent and child interactions
  • Using Jest mocks to mock out third-party libraries

Testing VueX (50 min)

Testing Vuex mutations (Exercise)? Testing Vuex actions (Exercise)? Testing Vuex getters (Exercise)? Testing the Store (Exercise)? Testing Vuex within a component (Exercise) Break (10 min)

Testing Vue Router (25 min)

  • Gotchas (Exercise)
  • Testing the route and router
  • Testing RouterLink

Testing Filters (10 min) (Exercise) End to End testing (15 min) (Exercise) Final Q&A (Discussion) (10 min)?