本书是一本为Vue应用程序开发者提供程序测试指导的书籍，适用于不同能力水平的Vue应用程序开发者。本书通过从零编写Hacker News应用程序的方式，详细阐述了Vue.js应用程序在每个开发阶段所适用的测试技巧，完整展示了编制Vue.js应用程序测试套件所需的必备技能。本书的前两章是对测试Vue.js应用的简单介绍，以及编写Vue.js测试的基础引导；在第3章到第11章，以及第13章的部分中，书中针对Vue.js程序的特性，分别介绍了测试Vue组件输出、events、methods 、Vuex、Vue Router以及测试mixin、filter和SSR的方法；第12章和第14章介绍了常见的快照测试和端到端测试的相关内容。除此之外，书中还对测试中遇到的一些特殊情况进行了描述，作者在演示如何通过mock Date.now 方法来解决此特殊情况的同时，也向我们展示了该系列问题的解决思路。读者结合书中实例进行演练，即可迅速掌握相关测试技巧。
Vue官方测试工具作者亲笔撰写，Vue.js应用测试完全学习指南
详细阐述Vue.js应用程序在每个开发阶段所适用的测试技巧，完整展示编制Vue.js应用程序测试套件所需的必备技能
Testing Vue.js Applications
[ 英 ] 埃德·耶伯格（Edd Yerburgh） 著
李宏凯 李冬梅 译
Vue.js应用测试
这是一本关于为Vue应用程序编写自动化测试的书。这本书的大部分内容集中在单元测试上，因为单元测试组件的技术是Vue所特有的。我还分别花了两章篇幅解释快照测试和端到端测试。
本书的目的是教你编写一套健壮的自动化测试，以验证Vue应用程序是否正确工作。我将教你一些我认为最有效的测试技巧和方法。
哪些人应该阅读本书
本书是为希望提高测试技能的Vue开发人员编写的。本书面向有经验的Vue开发人员和初学者，没有Vue经验的开发人员应该在阅读本书之前先学习基础知识。
本书的组织结构
本书共分为14章：
第1章介绍自动化测试和Vue框架。
第2章介绍单元测试。在这一章中，你将设置Jest来编译Vue单文件组件并编写你的第一个单元测试。
第3章讨论编写单元测试来检查组件输出。
第4章会解释如何测试方法。你将学习如何使用存根来测试组件方法，如何测试使用了定时器函数的代码，以及如何测试从其他模块导入复杂函数的组件。
第5章讨论测试事件。它包括测试原生DOM事件和自定义Vue事件。
第6章将介绍Vuex。Vuex是一个复杂的话题，所以本章是第7章的入门，你将学习如何测试Vuex。
第7章介绍如何测试Vuex。它包含测试了Vuex store, 以及与Vuex store连接的组件。
第8章讨论了使用工厂函数来优化测试文件结构。
第9章介绍Vue Router以及如何把它添加到项目中。
第10章研究如何测试使用了Vue Router的组件。
第11章讨论了测试mixin和过滤器（filter），以及测试使用它们的组件。
第12章研究快照测试。
第13章描述了如何测试服务器渲染的应用程序中的代码。
第14章通过端到端测试的教学来完成本书，进而完成你的测试。
尽管我已经确保每一章都可以拿出来单独阅读，但最好从头至尾阅读本书。本书通过从头构建一个Hacker News 应用程序来教授测试，因此你将从零开始学习测试大型应用程序的过程。如果按顺序阅读本书，你将能够看到为应用程序编写测试和代码的整个过程。不过我已将每章中的代码包含在本书中，编写代码清单的目的是使它们在没有Hacker News 应用程序更广泛上下文的情况下仍有意义。
关于代码
在本书中，你将从零构建一个Hacker News 应用程序，其中只有第5章使用了不同的代码库。所有的代码都可从华章网站http://www.hzbook.com 的本书页面中下载。同时在GitHub上也可以获取，你可以遵循附录A的指导找到这个仓库。每一章都有包含当前代码的Git分支，因此你可以借助分支来查看上一章Hacker News的代码。
GitHub需要使用Git，所以你需要安装它才能读取仓库。你需要使用Node来运行测试以及应用程序代码。你也需要安装Java来运行端到端测试。附录A已经包含了安装Node和Java的详细信息。
计算机\软件测试
“本书由Vue官方测试工具作者亲笔撰写，是Vue.js测试的完全学习指南。”
——Evan You, Vue.js创建者
“切中要点——你可以一站式测试Vue.js 应用程序。该书是前沿技术的上乘之作。”
——Clive Harber, Distorted Thinking
“Edd这本测试Vue的书是迄今为止我发现的最丰富的指南。我会向其他人推荐，它是学习Vue测试的必备书籍。”
——John Farrar, Active On-Demand
“简单易读。本书指导、演示并提供了成功测试Vue.js应用程序所有级别所需的技术。”
——Jim Schmehil，National Heritage Academies
Vue因其可靠、速度快、占用空间小和通用而广受Web开发人员的喜爱。由于Vue基于组件并使用DOM方法，因此，你需要调整你的应用程序测试实践。学习特定于Vue的测试工具和策略将确保你的应用程序正常运行。
本书旨在为Vue应用程序开发者提供程序测试指导，适用于不同能力水平的Vue应用程序开发者。本书通过从零编写Hacker News应用程序测试的方式，详细阐述Vue应用程序的有效测试技巧和方法。书中讲授了Vue中的最佳测试实践，以及适用于任何Web开发过程的常青法。
本书包括：
●单元测试、快照测试、以及端到端测试
●为Vue组件编写单元测试
●为Vue mixin、Vuex、和Vue Router编写测试
●提升测试技能, 如mock等
[英]埃德·耶伯格（Edd Yerburgh） 著：埃德·耶伯格（Edd Yerburgh）是一位经验丰富的JavaScript开发者, Vue核心贡献者, 官方Vue测试库的主要作者。
在软件开发的世界里，如何对应用程序进行测试来保证其符合预期是至关重要的，开发Vue.js应用程序也不例外。在系统开发过程中，对软件功能进行补充修改，对系统模块进行重构可谓是家常便饭，而这些修改很可能会在无意中影响程序的其他地方，造成未知的问题。从修复软件缺陷的代价的角度来看，缺陷发现或解决得越迟，其修复成本就越高，因此，从软件开发的一开始就编写测试套件会是一个不错的选择。
然而事实上，在实际开发过程中，编写测试代码通常是开发人员不太喜欢的一个环节。大多数情况下，前端开发人员在开发完一项功能之后，只是打开浏览器手动点击，查看效果是否正确，之后就很少对该块代码进行管理。造成这种情况的主要原因有两个：一个是业务繁忙，没有时间进行测试的编写；另一个则是不知道如何正确地编写Vue测试套件。
应用程序中哪些部分应该被优先测试？这些部分应该使用什么方法进行测试？一些特殊场景下的测试问题怎么解决？我们如何从一开始就整合不同的测试技巧，编制一个高效的测试套件？相信很多人都对这些问题感到困惑，幸运的是，Vue核心开发团队成员、Vue Test Utils 的核心作者埃德·耶伯格（Edd Yerburgh），通过将日常编写测试时所使用的技巧进行提炼，最终编写了本书，上述问题在本书中都一一得到了解答。译者有幸翻译这本著作，与大家一同探索Vue.js应用程序测试中的奥秘。
本书旨在为Vue应用程序开发者提供程序测试指导，适用于不同能力水平的Vue应用程序开发者。本书通过从零编写Hacker News应用程序测试的方式，详细阐述了Vue.js应用程序在每个开发阶段所适用的测试技巧，完整展示了编制Vue.js应用程序测试套件必备的技能。本书的前两章是对测试Vue.js应用的简单介绍，以及编写Vue.js测试的基础引导；第3～11章和第13章针对Vue.js程序的特性，分别介绍了测试Vue组件输出、events、methods 、Vuex、Vue Router以及测试mixin、filter和SSR的方法；第12章和第14章则介绍了常见的快照测试和端到端测试的相关内容。除此之外，书中还对测试中遇到的一些特殊情况进行了描述，例如在第11章中，使用了Date.now方法的函数返回值是在不断变化的，这也就导致了测试无法准确预测该值，作者在演示如何通过mock Date.now 方法来解决此特殊情况的同时，也向我们展示了该系列问题的解决思路。读者结合书中实例进行演练，即可迅速掌握相关测试技巧。
本书的前7章由李冬梅翻译，后7章由李宏凯翻译，李宏凯负责全书统稿。为了确保术语翻译的准确性，我们在翻译过程中查阅了大量的资料，以求尽可能详尽准确。不过由于时间和能力有限，书中内容难免存在纰漏，欢迎广大读者以及业内同行批评指正，联系邮箱为 Lihk11844@126.com。
本书的出版要感谢很多人，首先我们要感谢张世武，正是他的支持与推荐，译者才有了翻译本书的机会；感谢机械工业出版社华章分社的王春华和刘锋编辑，在翻译过程中，译者得到了许多专业的指导与帮助，编辑们的付出确保了本书的高质量出版；感谢我们的同事、朋友，一直支持并帮助我们审校译稿内容；感谢我们的家人，是他们的支持、鼓励与理解，让我们可以腾出更多的业余时间心无旁骛地专心翻译本书。最后，感谢原作者Edd Yerburgh，感谢他为我们带来了如此精彩的Vue测试作品，让我们一览Vue测试的精彩操作！
李宏凯 李冬梅
2019年10月16日
译者序
前言
致谢
第1章 Vue程序测试介绍 1
1.1 测试的定义 2
1.1.1 手动测试 2
1.1.2 自动化测试 3
1.1.3 测试GitHub的拉取请求 3
1.2 测试概览 4
1.2.1 端到端测试概览 4
1.2.2 单元测试概览 6
1.2.3 快照测试 7
1.2.4 有效地组合测试类型 8
1.2.5 测试驱动开发 9
1.2.6 了解何时不进行自动化测试 9
1.2.7 100%代码覆盖率的谬误 10
1.3 编写Hacker News应用程序 11
1.4 Vue测试概览 12
1.4.1 Vue实例 12
1.4.2 模板和渲染函数 13
1.4.3 了解Vue组件系统 14
1.4.4 单元测试组件 16
第2章 创建你的第一个测试 18
2.1 了解Vue项目结构 19
2.1.1 了解构建工具 19
2.1.2 使用Vue CLI生成项目 19
2.1.3 了解目录结构 20
2.1.4 了解npm 20
2.1.5 了解package.json文件 22
2.1.6 使用ESLint校验文件 22
2.1.7 编写测试脚本 23
2.1.8 构建项目 24
2.2 Jest简介 24
2.2.1 编写可用性测试 24
2.2.2 了解测试断言 27
2.2.3 避免误报 28
2.2.4 使用describe函数组织测试 29
2.2.5 组件的单元测试 31
2.2.6 使用Jest编译文件 31
2.2.7 挂载组件 32
2.3 Vue Test Utils简介 34
2.3.1 了解API 34
2.3.2 使用shallowMount 35
2.4 使用Chrome Debugger调试测试 36
第3章 渲染组件输出测试 40
3.1 创建测试规范 40
3.1.1 高级规范 41
3.1.2 创建组件级规范 42
3.2 渲染文本测试 43
3.2.1 向一个组件传递prop 43
3.2.2 组件文本内容测试 44
3.2.3 使用find 45
3.2.4 测试元素的文本内容 46
3.3 测试DOM属性 47
3.4 测试渲染组件的数量 48
3.5 测试prop 51
3.5.1 使用Vue Test Utils props方法 51
3.5.2 避免测试prop过程中的陷阱 52
3.6 测试class 53
3.7 测试样式 54
3.7.1 访问一个包装器元素 55
3.7.2 向一个应用程序添加样式 55
3.8 何时测试渲染的组件输出 56
第4章 测试组件方法 59
4.1 测试公共组件和私有组件方法 60
4.2 测试定时器函数 64
4.2.1 使用假定时器 65
4.2.2 使用spy测试 67
4.3 向Vue实例添加属性 69
4.4 模拟代码 70
4.4.1 模拟组件中的Vue实例属性 70
4.4.2 了解Jest mock函数 71
4.4.3 使用Vue生命周期钩子 72
4.5 模拟模块依赖 73
4.5.1 使用Jest mock模拟模块依赖 75
4.5.2 测试异步代码 76
4.5.3 适度使用mock 80
第5章 测试事件 82
5.1 测试原生DOM事件 83
5.2 测试自定义事件 85
5.2.1 测试发射自定义事件的组件 86
5.2.2 测试监听Vue自定义事件的组件 88
5.3 测试输入表单 89
5.3.1 测试文本输入框 90
5.3.2 测试单选按钮 93
5.4 了解jsdom的局限性 95
第6章 了解Vuex 97
6.1 了解state 98
6.2 Vuex可以解决的问题 99
6.3 了解Vuex store 99
6.3.1 创建一个store 100
6.3.2 了解Vuex mutation 101
6.3.3 了解Vuex action 102
6.3.4 了解Vuex getter 104
第7章 测试Vuex 107
7.1 了解store设计 108
7.2 向项目中添加Vuex 109
7.3 分别测试Vuex store的组成部分 111
7.3.1 测试mutation 112
7.3.2 测试Vuex getter 113
7.3.3 测试Vuex action 115
7.4 测试一个Vuex store实例 118
7.5 测试组件中的Vuex 123
第8章 使用工厂函数组织测试 129
8.1 了解工厂函数 129
8.1.1 使代码符合DRY原则 130
8.1.2 通过沿用同一种模式来提升代码质量 131
8.1.3 了解工厂函数的利弊 132
8.2 创建store工厂函数 132
8.3 覆盖工厂函数中的默认选项 133
8.4 创建包装器工厂函数 136
第9章 了解 Vue Router 141
9.1 了解路由 142
9.1.1 了解服务端路由 142
9.1.2 了解客户端路由 143
9.1.3 了解Vue Router的概念 144
9.1.4 了解动态路由匹配 145
9.1.5 为应用程序添加Vue Router 146
第10章 测试 Vue Router 150
10.1 测试路由属性 151
10.1.1 测试$route属性 151
10.1.2 测试$router属性 155
10.1.3 避免常见的陷阱 156
10.2 测试 RouterLink 组件 157
10.3 Vuex与Vue Router配合使用 162
10.3.1 把路由添加到store 162
10.3.2 在store中使用路由参数 162
第11章 测试mixin和过滤器 166
11.1 测试mixin 166
11.1.1 了解mixin 167
11.1.2 为mixin编写测试 168
11.1.3 测试组件中的局部mixin 171
11.1.4 测试组件中的全局mixin 172
11.2 测试过滤器 174
11.2.1 为过滤器编写测试 175
11.2.2 测试使用了Date.now的过滤器 177
11.2.3 测试组件中的过滤器 180
第12章 编写快照测试 183
12.1 了解快照测试 184
12.1.1 为组件编写快照测试 186
12.1.2 为静态组件编写快照测试 186
12.1.3 为动态组件编写快照测试 187
12.2 将快照测试添加到你的工作流 190
第13章 测试服务端渲染 192
13.1 了解服务端渲染 193
13.1.1 SSR的优点 193
13.1.2 SSR的缺点 195
13.2 测试服务端渲染的组件 196
13.2.1 使用Vue Server Test Utils 197
13.2.2 使用render遍历服务端渲染的标签 199
13.3 使用SuperTest测试状态码 200
13.4 隐式测试SSR 203
第14章 编写端到端测试 205
14.1 了解端到端测试 206
14.1.1 高效地使用端到端测试 206
14.1.2 了解Nightwatch和WebDriver 207
14.2 把Nightwatch添加到项目中 208
14.2.1 安装依赖项 208
14.2.2 配置Nightwatch 209
14.2.3 添加一个可用性测试 210
14.2.4 编写一个端到端测试脚本 211
14.3 使用 Nightwatch编写端到端测试 212
14.3.1 选择要编写哪些端到端测试 213
14.3.2 为路由编写端到端测试 213
14.3.3 为动态数据编写端到端测试 215
14.4 在多浏览器运行端到端测试 217
14.5 接下来何去何从 218
附录 A 安装开发环境 220
附录 B 运行生产构建 226
附录 C 练习题答案 228
