Testing Vue.js Applications
Edd Yerburgh
  • MEAP began October 2017
  • Publication in September 2018 (estimated)
  • ISBN 9781617295249
  • 375 pages (estimated)
  • printed in black & white

A technically strong and comprehensive approach to test-driven development of the Vue.js library, with real-world examples and generous code examples.

Jon Guenther

Vue is a powerful web framework that changes the way you build web UI. To test applications built with Vue, you need to master a new set of tools and techniques designed to work with Vue's unique reactive design and the flexible collection of components that make up the Vue stack. Mastering Vue testing not only improves the quality of your apps, it guarantees that you understand how your apps work top-to-bottom and end to end.

Table of Contents detailed table of contents

1 Introduction to testing Vue applications

1.1 Writing a Hacker News application

1.2 Why test?

1.2.1 Testing code manually

1.2.2 Understanding automated testing

1.2.3 Using automated tests for modern workflows

1.2.4 Testing pull requests on GitHub

1.2.5 Testing’s not the cure-all

1.3 Testing overview

1.3.1 Overview of end-to-end tests

1.3.2 Unit testing

1.3.3 Snapshot testing

1.3.4 Combining test types effectively

1.4 Vue testing overview

1.4.1 Understanding the Vue ecosystem

1.4.2 Understanding the Vue component system

1.4.3 Compiling SFCS

1.4.4 Testing component output

1.4.5 Understanding component contracts

1.5 Summary

2 Creating your first unit test

2.1 Understanding a Vue project structure

2.1.1 Understanding build tools

2.1.2 Understanding directory structure

2.1.3 Understanding npm

2.1.4 Understanding the package.json file

2.1.5 Using npm scripts

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 Unit testing a component

2.2.4 Compiling files with Jest

2.2.5 Organizing tests with the describe function

2.3 Introduction to Vue Test Utils

2.3.1 Understanding the wrapper API

2.3.2 Using shallow

2.4 Debugging Tests with Chrome Debugger

2.5 Summary

2.6 Exercises

3 Testing component output

3.1 Creating specifications

3.2 Testing how many components are rendered

3.2.1 Using findAll

3.3 Testing props

3.3.1 Using the Vue instance to test props

3.3.2 Avoiding gotchas when testing props

3.3.3 Using the props method

3.3.4 When to test props

3.3.5 Understanding the wrapper array

3.4 Testing text

3.4.1 Testing the text content of a component

3.4.2 Accessing a wrapper on a wrapper array

3.4.3 Using find

3.4.4 Testing the text content of an element

3.4.5 When to test text

3.5 Testing DOM attributes

3.5.1 Avoiding Boolean assertions

3.5.2 When to test DOM attributes

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 Setting component data with setData

3.7.3 When to test style

3.7.4 Adding style to our application

3.8 Summary

3.9 Exercises

4 Testing component methods

4.1 Creating the specs

4.2 Adding properties to the Vue instance

4.3 Testing component methods

4.3.1 Understanding Vue methods

4.3.2 Testing public component methods

4.3.3 When to test methods

4.4 Testing using stubs

4.4.1 Understanding stubs

4.4.2 Stubbing Vue instance properties in components

4.4.3 Understanding Jest mock functions

4.4.4 Stubbing functions with Jest mocks

4.4.5 Using Vue lifecycle hooks

4.5 Stubbing file dependencies

4.5.1 Using Jest mocks to stub file dependencies

4.6 Testing timer functions

4.6.1 Testing setInterval in methods with fake timers

4.6.2 Clearing setTimeout calls in methods

4.6.3 Keeping mock timers isolated

4.7 Summary

4.8 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 input elements

5.3.2 Testing radio buttons

5.3.3 Setting select element values

5.4 Understanding the limitations of JSDOM

5.5 Summary

6 Understanding Vuex

6.1 Understanding state

6.2 Understanding Vuex

6.2.1 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

6.4 Summary

7 Testing Vuex

7.1 Adding Vuex to the project

7.1.1 Creating a Vuex store with a store config object

7.1.2 Adding Vuex

7.2 Understanding the store design

7.3 Testing Vuex mutations

7.3.1 Testing Vuex mutations

7.4 Testing Vuex getters

7.4.1 Testing Vuex getters

7.4.2 Testing chained Vuex getters

7.5 Testing Vuex actions

7.5.1 Testing Vuex actions

7.6 Testing a Vuex store instance

7.6.1 Testing the store

7.7 Testing Vuex in components with localVue

7.7.1 Testing Vuex with localVue

7.7.2 Using beforeEach

7.7.3 Using mapActions

7.7.4 When to test using a localVue

7.8 Summary

7.9 Exercises

8 Using factory functions

8.1 Understanding factory functions

8.1.1 Avoiding repetition (the DRY principle)

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.2.1 Overwriting default options in factory functions

8.3 Creating a wrapper factory function

8.4 Summary

8.5 Exercises

9 Testing Vue Router

9.1 Understanding Vue Router

9.1.1 Understanding client-side routing

9.1.2 Adding Vue Router to the project

9.2 Testing routes

9.2.1 Testing routes implicitly

9.2.2 Testing routes explicitly

9.3 Testing Router properties

9.3.1 Avoiding common gotchas

9.3.2 Testing the $route property

9.3.3 Testing the $router property

9.4 Testing Router components

9.4.1 Understanding the <router-view> component

9.4.2 Testing <router-view>

9.5 Using Vuex with Vue Router

9.5.1 Adding the route to the store

9.5.2 Adding pagination with router params

9.6 Summary

9.7 Exercises

10 Testing mixins and filters

10.1 Testing mixins

10.1.1 Understanding mixins

10.1.2 Testing mixins

10.1.3 Testing local mixins in components

10.1.4 Testing global mixins in components

10.2 Testing Filters

10.2.1 Testing filters

10.2.2 Testing filters that use Date.now

10.2.3 Testing filters in components

10.3 Summary

10.4 Exercises

11 Writing snapshot tests

11.1 Understanding snapshot tests

11.1.1 Testing style with snapshot tests

11.1.2 Adding snapshot tests to your workflow

11.2 Writing snapshot tests

11.2.1 Writing snapshot tests for static components

11.2.2 Writing snapshot tests for dynamic components

11.3 Summary

11.4 Exercises

12 Testing server-side rendered code

12.1 Understanding server-side rendering

12.1.1 The downside of server-side rendering

12.2 Testing server-side rendered components

12.2.1 Using Vue Server Test Utils

12.2.2 Traversing server-side rendered markup with render

12.3 Testing status codes with SuperTest

12.4 Testing SSR implicitly

12.5 Summary

13 Writing end-to-end tests

13.1 Understanding end-to-end tests

13.1.1 Benefits of end-to-end tests

13.1.2 Downsides of end-to-end tests

13.1.3 Using end-to-end tests in a test suite

13.1.4 Understanding Nightwatch and the WebDriver API

13.2 Adding Nightwatch to a project

13.2.1 Configuring Nightwatch

13.2.2 Adding end-to-end tests to a server-side project

13.2.3 Adding end-to-end tests to a client-side project

13.3 Writing end-to-end tests with Nightwatch

13.3.1 Deciding which end-to-end tests to write

13.3.2 Writing end-to-end tests for routes

13.3.3 Writing end-to-end tests for dynamic data

13.4 Running end-to-end tests in multiple browsers

13.5 Where to go from here

13.6 Summary


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 Building for production

B.3 Running the Hacker News production build locally

B.4 Hosting the application

Appendix C: Styling the Hacker News app components

C.1 Using this appendix

C.2 Chapter 3 components

C.3 Chapter 4

C.4 Chapter 6

About the Technology

Vue.js is one of the fastest growing and most popular open-source JavaScript frameworks around. Vue's meteoric success is found in its simplicity and short learning curve, but few resources are available to teach you how to test a Vue application effectively and efficiently. None of those resources are comprehensive—a blog post here, a chapter there. This book will put an end to your search!

About the book

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 avoriaz, teaches you how to set up effective testing practices. You'll use the Jest framework to run tests for a Hacker News application built with Vue, Vuex and Vue Router. You'll especially appreciate the instantly-useful tips and best practices distilled from the author's extensive hands-on development experience.

What's inside

  • Building and testing component output, method, and events
  • Running unit tests, snapshot tests, and end to end tests in Jest
  • Testing server-side rendering
  • Testing Vuex and Vue-router
  • Creating and testing Vue mixins

About the reader

Written for developers with an intermediate knowledge of JavaScript, HTML, and CSS and a basic understanding of Vue.js. Some experience with ES6 is helpful, but not required.

About the author

Edd Yerburgh is an experienced JavaScript developer and Vue core contributor. He is the main author of the official Vue test library and a prominent figure in the Vue testing community..

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
Testing Vue.js Applications (combo) added to cart
continue shopping
go to cart

MEAP combo $44.99 pBook + eBook + liveBook
MEAP eBook $35.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks

The book is a very good introduction to not just testing Vue.js applications, but for automated testing in general.

Viktor Nemes

It's a very good introduction to the subject even if you've little experience of Vue.

Tom Madden

Mr. Yerburgh clearly knows what he wrote about. He took what I consider the second most boring part of application development and made it enjoyable to watch the tests go from failing to passing!

Dan Posey