Testing Vue.js Applications
Edd Yerburgh
  • MEAP began October 2017
  • Publication in Summer 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. Why test?

1.1.1. Testing code manually

1.1.2. Automated testing

1.1.3. Testing pull requests on GitHub

1.1.4. Continuous integration, delivery, and deployment

1.1.5. Testing’s not the cure-all

1.2. Overview of unit testing

1.2.1. Unit tests are granular

1.2.2. Unit tests run quickly

1.2.3. Unit tests act as documentation

1.2.4. Unit tests are reliable

1.3. Overview of end-to-end tests

1.3.1. End-to-end tests are slow

1.3.2. End-to-end tests are difficult to debug

1.3.3. End-to-end tests test the entire application

1.3.4. Testing with unit tests and end-to-end tests

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.4.6. Testing the application with end-to-end tests

1.5. Writing a Hacker News application

1.6. Summary

2. Creating your first unit test

2.1. Understanding a Vue project structure

2.1.1. Understanding npm

2.1.2. Understanding the package.json file

2.1.3. Using npm scripts

2.1.4. Linting files with eslint

2.1.5. Building the project

2.2. Introduction to Jest

2.2.1. Writing a sanity test

2.2.2. Understanding test assertions

2.2.3. Writing component test in Jest

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. Testing text output with vue-test-utils

2.4. Debugging Tests with Chrome Debugger

2.5. Summary

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 hasProp to test a component

3.3.2. Using the Vue instance to test props

3.3.3. Avoiding the gotcha when testing props

3.3.4. Understanding the WrapperArray

3.3.5. When to test props

3.4. Testing text

3.4.1. Testing the text content of a component

3.4.2. Using find

3.4.3. Testing the text content of an element

3.4.4. When to test text

3.5. Testing DOM attributes

3.5.1. When to test DOM attributes

3.6. Testing style

3.6.1. Testing style with hasStyle

3.6.2. Testing style using the wrapper element

3.6.3. Setting component data with setData

3.6.4. Why use hasStyle

3.6.5. When to test style

3.6.6. Styling without testing

3.7. Testing classes

3.7.1. When to test classes

3.8. Adding style

3.9. Summary

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 component methods

4.3.3. Updating the render tree

4.3.4. 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

5. Understanding Vuex

5.1. Understanding state

5.2. Understanding Vuex

5.2.1. The problem Vuex solves

5.3. Understanding the Vuex store

5.3.1. Creating a store

5.3.2. Understanding Vuex mutations

5.3.3. Understanding Vuex actions

5.3.4. Understanding Vuex getters

5.4. Summary

6. Testing Vuex

6.1. Adding Vuex to the project

6.1.1. Creating a Vuex store with a store config object

6.1.2. Adding Vuex

6.2. Understanding the store design

6.3. Testing Vuex mutations

6.3.1. Testing Vuex mutations

6.4. Testing Vuex getters

6.4.1. Testing Vuex getters

6.5. Testing Vuex actions

6.5.1. Testing Vuex actions

6.6. Testing a Vuex store instance

6.6.1. Testing the store

6.7. Testing Vuex in components with localVue

6.7.1. Using mapActions

6.7.2. Testing Vuex with localVue

6.7.3. When to test using a localVue

6.8. Summary

6.9. Exercises

7. Using factory functions

7.1. Understanding factory functions

7.1.1. Avoiding repetition (the DRY principle)

7.1.2. Improving test code by following a pattern

7.1.3. Understanding the trade-offs of factory functions

7.2. Creating a store factory function

7.2.1. Overwriting default options in factory functions

7.3. Creating a wrapper factory function

7.4. Summary

7.5. Exercises

8. Testing Vue Router

8.1. Understanding Vue Router

8.1.1. Avoiding page loads

8.1.2. Adding Vue Router to the project

8.2. Testing Routes

8.2.1. Testing routes implicitly

8.2.2. Testing routes explicitly

8.3. Testing Router properties

8.3.1. Avoiding common gotchas

8.3.2. Testing the $route property

8.3.3. Testing the $router property

8.4. Testing Router components

8.4.1. Understanding router-view

8.4.2. Testing router-view

8.5. Using Vuex with Vue Router

8.5.1. Adding the route to the store

8.5.2. Adding pagination with router params

8.6. Summary

8.7. Exercises

9. Testing mixins and filters

9.1. Testing mixins

9.1.1. Understanding mixins

9.1.2. Testing mixins

9.1.3. Testing local mixins in components

9.1.4. Testing global mixins in components

9.2. Testing Filters

9.2.1. Testing filters

9.2.2. Testing filters that use Date.now

9.2.3. Testing filters in components

9.3. Summary

9.4. Exercises

10. Writing snapshot tests

10.1. Understanding snapshot tests

10.1.1. Testing style with snapshot tests

10.1.2. Adding snapshot tests to your workflow

10.2. Writing snapshot tests

10.2.1. Writing snapshot tests for static components

10.2.2. Writing snapshot tests for dynamic components

10.2.3. Writing snapshot tests for components that use Vuex

10.3. Summary

10.4. Exercises

11. Testing server-side rendering

12. Testing events

13. Writing end-to-end tests


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

A.5.3. Installing Node with Linux package managers

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

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

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.
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