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

Preface

Acknowledgements

About this book

About the Author

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

1.5 Summary

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

2.5 Summary

2.6 Exercises

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

3.9 Summary

3.10 Exercises

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

5.5 Summary

5.6 Exercises

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

6.4 Summary

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

7.6 Summary

7.7 Exercises

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

8.5 Summary

8.6 Exercises

9 Understanding Vue Router

9.1 Understanding Routing

9.1.1 Understanding server-side routing

9.1.2 Understanding client-side routing

9.2 Understanding Vue Router

9.2.1 Understanding dynamic route matching

9.2.2 Adding Vue Router to an application

9.3 Summary

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

10.4 Summary

10.5 Exercises

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

11.3 Summary

11.4 Exercises

12 Writing snapshot tests

12.1 Understanding snapshot tests

12.2 Writing snapshot tests for components

12.2.1 Writing snapshot tests for static components

12.2.2 Writing snapshot tests for dynamic components

12.3 Adding snapshot tests to your workflow

12.4 Summary

12.5 Exercises

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

13.5 Summary

13.6 Exercises

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

14.5 Summary

14.6 Where to go from here

Appendixes

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

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.

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