Testing Vue.js Applications

by Edd Yerburgh

Overview

Summary

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, explains the best testing practices in Vue along with an evergreen methodology that applies to any web dev process.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the Technology

Web developers who use the Vue framework love its reliability, speed, small footprint, and versatility. Vue's component-based approach and use of DOM methods require you to adapt your app-testing practices. Learning Vue-specific testing tools and strategies will ensure your apps run like they should.

About the Book

With Testing Vue.js Applications, you'll discover effective testing methods for Vue applications. You'll enjoy author Edd Yerburgh's engaging style and fun real-world examples as you learn to use the Jest framework to run tests for a Hacker News application built with Vue, Vuex, and Vue Router. This comprehensive guide teaches the best testing practices in Vue along with an evergreen methodology that applies to any web dev process.

What's inside

• Unit tests, snapshot tests, and end-to-end tests
• Writing unit tests for Vue components
• Writing tests for Vue mixins, Vuex, and Vue Router
• Advanced testing techniques, like mocking

About the Reader

Written for Vue developers at any level.

About the Author

Edd Yerburgh is a JavaScript developer and Vue core team member. He's the main author of the Vue Test Utils library and is passionate about open source tooling for testing component-based applications.

Table of Contents

1. Introduction to testing Vue applications
2. Creating your first test
3. Testing rendered component output
4. Testing component methods
5. Testing events
6. Understanding Vuex
7. Testing Vuex
8. Organizing tests with factory functions
9. Understanding Vue Router
10. Testing Vue Router
11. Testing mixins and filters
12. Writing snapshot tests
13. Testing server-side rendering
14. Writing end-to-end tests

APPENDIXES
• A - Setting up your environment
• B - Running the production build
• C - Exercise answers

Product Details

ISBN-13:	9781638356189
Publisher:	Manning
Publication date:	12/07/2018
Sold by:	SIMON & SCHUSTER
Format:	eBook
Pages:	272
File size:	2 MB

About the Author

Edd Yerburgh is a JavaScript developer and Vue core team member. He’s the main author of the Vue Test Utils library and is passionate about open source tooling for testing component-based applications.

We interviewed Edd as a part of our Six Questions series. Check it out here.
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.

Table of Contents

Preface xiii

Acknowledgments xiv

About this book xv

About the author xviii

About the cover illustration xix

1 Introduction to testing Vue applications 1

1.1 Defining testing 2

Manual testing 2

Automated testing 3

Testing pull requests on GitHub 3

1.2 Testing overview 4

Overview of end-to-end tests 5

Overview of unit tests 6

Snapshot testing 7

Combining test types effectively 8

Test-driven development 9

Learning token not to test 10

The fallacy of 100% code coverage 11

1.3 Writing a Hacker News application 11

1.4 Vue testing overview 12

The Vue instance 13

Templates and render functions 14

Understanding the Vue component system 15

Unit testing components 16

2 Creating your first test 19

2.1 Understanding a Vue project structure 20

Understanding build tools 20

Using Vue CLI to generate a project 21

Understanding directory structure 21

Understanding npm 22

Understanding the package.json file 23

Linting files with ESLint 24

Writing a test script 25

Building the project 25

2.2 Introduction to Jest 26

Writing a sanity test 26

Understanding test assertions 29

Avoiding false positives 30

Organizing tests with the describe function 31

Unit testing a component 33

Compiling files with Jest 33

Mounting a component 35

2.3 Introduction to Vue Test Utils 37

Understanding the API 37

Using shallowMount 38

2.4 Debugging tests with Chrome Debugger 39

3 Testing rendered component output 43

3.1 Creating test specifications 44

High-level specifications 44

Creating component-level specifications 45

3.2 Testing rendered text 46

Passing props to a component 47

Testing the text content of a component 47

Using find 49

Testing the text content of an element 49

3.3 Testing DOM attributes 50

Avoiding Boolean assertions 51

3.4 Testing how many components are rendered 52

Using findAll 52

3.5 Testing props 54

Using the Vue Test Utils props method 55

Avoiding golchas when testing props 56

3.6 Testing classes 57

Using the classes method 57

3.7 Testing style 58

Accessing a wrapper element 58

Adding style to an application 59

3.8 When to test rendered component output 60

4 Testing component methods 63

4.1 Testing public and private component methods 64

Testing public component methods 65

4.2 Testing timer functions 69

Using fake timers 70

Testing using spies 72

4.3 Adding properties to the Vue instance 73

4.4 Mocking code 75

Mocking Vue instance properties in components 75

Understanding Jest mock functions 76

Using Vue lifecycle hooks 78

4.5 Mocking module dependencies 79

Using Jest mocks to mock module dependencies 80

Testing asynchronous code 81

Using mocks in moderation 86

5 Testing events 88

5.1 Testing native DOM events 89

Using the Vue Test Utils trigger method 90

5.2 Testing custom Vue events 92

Testing that components emit custom events 92

Testing components that listen to Vue custom events 94

5.3 Testing input forms 96

Testing text control inputs 96

Testing radio buttons 100

5.4 Understanding the limitations of jsdom 102

6 Understanding Vuex 105

6.1 Understanding state 106

6.2 The problem Vuex solves 107

6.3 Understanding the Vuex store 108

Creating a store 109

Understanding Vuex mutations 109

Understanding Vuex actions 111

Understanding Vuex getters 113

7 Testing Vuex 115

7.1 Understanding the store design 116

7.2 Adding Vuex to the project 117

7.3 Testing Vuex store parts separately 120

Testing mutations 120

Testing Vuex getters 122

Testing Vuex actions 124

7.4 Testing a Vuex store instance 127

Understanding the localVue constructor 129

7.5 Testing Vuex in components 132

8 Organizing tests with factory functions 137

8.1 Understanding factory functions 137

Keeping code DRY 138

Improving test code by following a pattern 139

Understanding the trade-offs of factory functions 140

8.2 Creating a store factory function 140

8.3 Overwriting default options in factory functions 141

8.4 Creating a wrapper factory function 145

9 Understanding Vue Router 149

9.1 Understanding routing 150

Understanding server-side routing 150

Understanding client-side routing 151

Understanding Vue Router concepts 152

Understanding dynamic route matching 154

Adding Vue Router to an application 155

10 Testing Vue Router 158

10.1 Testing router properties 159

Testing the $route property 159

Testing the $rouhrr property 163

Avoiding common gotchas 165

10.2 Testing the RouterLink component 166

10.3 Using Vuex with Vue Router 170

Adding the route to the store 171

Using router parameters in the store 171

11 Testing mixins and filters 175

11.1 Testing mixins 176

Understanding mixins 176

Writing tests for mixins 177

Testing local mixins in components 180

Testing global mixins in components 182

11.2 Testing filters 184

Writing tests for filters 184

Testing filters that use Date.now 187

Testing filters in components 189

12 Writing snapshot tests 193

12.1 Understanding snapshot tests 194

Writing snapshot tests for components 196

Writing snapshot tests for static components 196

Writing snapshot tests for dynamic components 198

12.2 Adding snapshot tests to your workflow 200

13 Testing server-side rendering 203

13.1 Understanding server-side rendering 204

The advantages of SSR 204

The disadvantages of SSR 206

13.2 Testing server-side rendered components 207

Using Vue Server Test Utils 208

Traversing server-side rendered markup with render 210

13.3 Testing status codes with SuperTest 211

13.4 Testing SSR implicitly 214

14 Writing end-to-end tests 216

14.1 Understanding end-to-end tests 217

Using end-to-end tests effectively 217

Understanding Nightwatch and WebDriver 218

14.2 Adding Nightwatch to a project 219

Installing dependencies 219

Configuring Nightwatch 220

Adding a sanity test 221

Writing an end-to-end test script 222

14.3 Writing end-to-end tests with Nightwatch 224

Deciding which end-to-end tests to write 224

Writing end-to-end tests for mules 224

Writing end-to-end tests for dynamic data 226

14.4 Running end-to-end tests in multiple browsers 228

14.5 Where to go from here 229

Appendix A Setting up your environment 231

Appendix B Running the production build 237

Appendix C Exercise answers 239

Index 243