Testing Vue.js Applications
Edd Yerburgh
  • December 2018
  • ISBN 9781617295249
  • 272 pages
  • printed in black & white
ePub + Kindle available Dec 26, 2018

A comprehensive guide to Vue.js testing by the author of the official testing utility.

Evan You, creator of Vue.js

Testing Vue.js Applications is a comprehensive guide to testing Vue components, methods, events, and output. Author Edd Yerburgh, creator of the Vue testing utility, explains the best testing practices in Vue along with an evergreen methodology that applies to any web dev process.

Table of Contents detailed table of contents

1 Introduction to testing Vue applications

1.1 Defining testing

1.1.1 Testing code manually

1.1.2 Understanding automated testing

1.1.3 Testing pull requests on GitHub

1.2 Testing overview

1.2.1 Overview of end-to-end tests

1.2.2 Overview of unit tests

1.2.3 Snapshot testing

1.2.4 Combining test types effectively

1.2.5 Test-driven development

1.2.6 Learning when not to test

1.2.7 The fallacy of 100% test coverage

1.3 Writing a Hacker News application

1.4 Vue testing overview

1.4.1 The Vue instance

1.4.2 Templates and render functions

1.4.3 Understanding the Vue component system

1.4.4 Unit testing components


2 Creating your first test

2.1 Understanding a Vue project structure

2.1.1 Understanding build tools

2.1.2 Using Vue CLI to generate a project

2.1.3 Understanding directory structure

2.1.4 Understanding npm

2.1.5 Understanding the package.json file

2.1.6 Linting files with eslint

2.1.7 Writing a test script

2.1.8 Building the project

2.2 Introduction to Jest

2.2.1 Writing a sanity test

2.2.2 Understanding test assertions

2.2.3 Avoiding false-positives

2.2.4 Organizing tests with the describe function

2.2.5 Unit testing a component

2.2.6 Compiling files with Jest

2.2.7 Mounting a component

2.3 Introduction to Vue Test Utils

2.3.1 Understanding the API

2.3.2 Using shallowMount

2.4 Debugging Tests with Chrome Debugger



3 Testing rendered component output

3.1 Creating test specifications

3.1.1 High-level specifications

3.1.2 Creating component-level specifications

3.2 Testing rendered text

3.2.1 Passing props to a component

3.2.2 Testing the text content of a component

3.2.3 Using find

3.2.4 Testing the text content of an element

3.3 Testing DOM attributes

3.3.1 Avoiding Boolean assertions

3.4 Testing how many components are rendered

3.4.1 Using findAll

3.5 Testing props

3.5.1 Using the Vue Test Utils props method

3.5.2 Avoiding gotchas when testing props

3.6 Testing classes

3.6.1 Using the classes method

3.7 Testing style

3.7.1 Accessing a wrapper element

3.7.2 Adding style to an application

3.8 When to test rendered component output



4 Testing component methods

4.1 Testing component methods

4.1.1 Testing public component methods

4.2 Testing timer functions

4.2.1 Using fake timers

4.2.2 Testing using spies

4.3 Adding properties to the Vue instance

4.4 Mocking code

4.4.1 Mocking Vue instance properties in components

4.4.2 Understanding Jest mock functions

4.4.3 Using Vue lifecycle hooks

4.5 Mocking module dependencies

4.5.1 Using Jest mocks to mock module dependencies

4.5.2 Testing asynchronous code

4.5.3 Using mocks in moderation

4.6 Summary

4.7 Exercises

5 Testing events

5.1 Testing native DOM events

5.1.1 Using the Vue Test Utils trigger method

5.2 Testing custom Vue events

5.2.1 Testing that components emit custom events

5.2.2 Testing components that listen to Vue custom events

5.3 Testing input forms

5.3.1 Testing text control inputs

5.3.2 Testing radio buttons

5.4 Understanding the limitations of jsdom



6 Understanding Vuex

6.1 Understanding state

6.2 The problem Vuex solves

6.3 Understanding the Vuex store

6.3.1 Creating a store

6.3.2 Understanding Vuex mutations

6.3.3 Understanding Vuex actions

6.3.4 Understanding Vuex getters


7 Testing Vuex

7.1 Understanding the store design

7.2 Adding Vuex to the project

7.3 Testing Vuex store parts separately

7.3.1 Testing mutations

7.3.2 Testing Vuex getters

7.3.3 Testing Vuex actions

7.4 Testing a Vuex store instance

7.4.1 Understanding the localVue constructor

7.5 Testing Vuex in components



8 Organizing tests with factory functions

8.1 Understanding factory functions

8.1.1 Keeping code DRY

8.1.2 Improving test code by following a pattern

8.1.3 Understanding the trade-offs of factory functions

8.2 Creating a store factory function

8.3 Overwriting default options in factory functions

8.4 Creating a wrapper factory function



9 Understanding Vue Router

9.1 Understanding Routing

9.1.1 Understanding server-side routing

9.1.2 Understanding client-side routing

9.1.3 Understanding Vue Router

9.1.4 Understanding dynamic route matching

9.1.5 Adding Vue Router to an application


10 Testing Vue Router

10.1 Testing router properties

10.1.1 Testing the $route property

10.1.2 Testing the $router property

10.1.3 Avoiding common gotchas

10.3 Using Vuex with Vue Router

10.3.1 Adding the route to the store

10.3.2 Using router parameters in the store



11 Testing mixins and filters

11.1 Testing mixins

11.1.1 Understanding mixins

11.1.2 Testing mixins

11.1.3 Testing local mixins in components

11.1.4 Testing global mixins in components

11.2 Testing Filters

11.2.1 Testing filters

11.2.2 Testing filters that use Date.now

11.2.3 Testing filters in components



12 Writing snapshot tests

12.1 Understanding snapshot tests

12.1.1 Writing snapshot tests for components

12.1.2 Writing snapshot tests for static components

12.1.3 Writing snapshot tests for dynamic components

12.2 Adding snapshot tests to your workflow



13 Testing server-side rendering

13.1 Understanding server-side rendering

13.1.1 The benefits of SSR

13.1.2 The downsides of SSR

13.2 Testing server-side rendered components

13.2.1 Using Vue Server Test Utils

13.2.2 Traversing server-side rendered markup with render

13.3 Testing status codes with SuperTest

13.4 Testing SSR implicitly



14 Writing end-to-end tests

14.1 Understanding end-to-end tests

14.1.1 Using end-to-end tests effectively

14.1.2 Understanding Nightwatch and WebDriver

14.2 Adding Nightwatch to a project

14.2.1 Installing dependencies

14.2.2 Configuring Nightwatch

14.2.3 Adding a sanity test

14.2.4 Writing an end-to-end test script

14.3 Writing end-to-end tests with Nightwatch

14.3.1 Deciding which end-to-end tests to write

14.3.2 Writing end-to-end tests for routes

14.3.3 Writing end-to-end tests for dynamic data

14.4 Running end-to-end tests in multiple browsers


Where to go from here


Appendix A: Setting up your environment

A.1 Choosing a text editor

A.2 Using the command line

A.3 Installing Chrome

A.3.1 Using Chrome DevTools

A.4 Installing Vue.js devtools Chrome extension

A.5 Installing Node and npm

A.5.1 Installing Node with the one-click installer

A.5.2 Installing Node with homebrew (OSX only)

A.5.3 Installing Node with Linux package managers (Linux only)

A.5.4 Installing with NVM

A.5.5 Verifying node and npm are installed

A.6 Installing Git

A.7 Starting a new chapter

A.8 Starting chapter 5

A.9 Installing Java Development Kit

Appendix B: Running the production build

B.1 Understanding the production build

B.2 Running the Hacker News production build locally

Appendix C: Exercise answers

Chapter 2

Chapter 3

Chapter 4

Chapter 5

Chapter 7

Chapter 8

Chapter 10

Chapter 11

Chapter 12

Chapter 13

About the Technology

Web developers who use the Vue framework love its reliability, speed, small footprint, and versatility. Vue’s component-based approach and use of DOM methods require you to adapt your app-testing practices. Learning Vue-specific testing tools and strategies will ensure your apps run like they should.

About the book

With Testing Vue.js Applications, you’ll discover effective testing methods for Vue applications. You’ll enjoy author Edd Yerburgh’s engaging style and fun real-world examples as you learn to use the Jest framework to run tests for a Hacker News application built with Vue, Vuex, and Vue Router. This comprehensive guide teaches the best testing practices in Vue along with an evergreen methodology that applies to any web dev process.

What's inside

  • Unit tests, snapshot tests, and end-to-end tests
  • Writing unit tests for Vue components
  • Writing tests for Vue mixins, Vuex, and Vue Router
  • Advanced testing techniques, like mocking

About the reader

Written for Vue developers at any level.

About the author

Edd Yerburgh is a JavaScript developer and Vue core team member. He’s the main author of the Vue Test Utils library and is passionate about open source tooling for testing component-based applications.

placing your order...

Don't refresh or navigate away from the page.

FREE domestic shipping on three or more pBooks

Totally on point—your one-stop shop for testin Vue.js applications. Best of breed for the latest tech.

Clive Harber, Distorted Thinking

Edd’s book on testing Vue is the richest guide I have found so far. I will be pointing others to it as the way to learn testing that works for Vue.

John Farrar, Active On-Demand

Straightforward and easy to read. The book instructs, demonstrates, and provides the techniques necessary to successfully test all levels of a Vue.js application.

Jim Schmehil, National Heritage Academies