Testing Vue.js Applications
Edd Yerburgh
  • MEAP began October 2017
  • Publication in Summer 2018 (estimated)
  • ISBN 9781617295249
  • 275 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.
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

5. Testing Vuex

6. Testing vue-router

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
MEAP eBook $35.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks