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

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.

"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

"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

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

5.1. Understanding the Vuex store

5.2. Adding Vuex to the project

5.2.1. Creating a store

5.2.2. Installing Vuex

5.3. Testing Vuex mutations

5.3.1. Understanding Vuex mutations

5.3.2. Testing Vuex mutations

5.3.3. Understanding Vue.set

5.4. Testing Vuex actions

5.4.1. Understanding Vuex actions

5.4.2. Testing Vuex actions

5.5. Testing Vuex getters

5.5.1. Understanding Vuex getters

5.5.2. Testing Vuex getters

5.6. Testing a Vuex store

5.6.1. Testing the store

5.7. Testing Vuex in components with localVue

5.7.1. Using mapActions

5.7.2. Testing Vuex with localVue

5.7.3. When to test localVue

5.8. Summary

6. Testing Vue Router

6.1. Understanding Vue Router

6.1.1. Avoiding page loads

6.1.2. Adding Vue Router to the project

6.2. Testing Routes

6.2.1. Testing routes implicitly

6.2.2. Testing routes explicitly

6.3. Testing Router properties

6.3.1. Testing the $route property

6.4. Testing Router components

6.4.1. Understanding router-view

6.4.2. Testing router-view

6.4.5. Testing a watcher function

6.5. Using Vuex with Vue Router

6.5.1. Adding the route to the store

6.5.2. Adding pagination with router params

6.6. Summary

7. Testing mixins and filters

8. Using snapshot tests

9. Testing server-side rendering

10. Testing events

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