Vue 应用单元测试的策略与实践 01 - 前言和目标

本文首发于 Vue 应用单元测试的策略与实践 01 - 前言和目标 | 吕立青的博客

欢迎关注知乎专栏 —— 前端的逆袭（凡可 JavaScript，终将 JavaScript。）

欢迎关注个人博客，知乎，GitHub，掘金。

---

前言

本文主要尝试解决三个问题：

1. 在 TDD 作完Tasking列完实例化数据以后，彻底没有UT基础不知道该怎么写单元测试？
2. 在Vue应用的单元测试中，对UI组件和vuex store等测试的区别有何不一样？颗粒度该细到什么程度？
3. 测试收益如何最大化，如何配置高性价比的测试策略，即什么地方到底该花力气测试，什么地方又能够暂且放一放？

不谈论的包括：

• ATT 验收测试 或 E2E 端到端测试，这个是我想进一步探索的话题，特别是在TDD的语境下。#322
• 为何要 TDD？可是我会讲为何要 UT 单元测试。测试和TDD是两码事，而光是自动化测试的好处就已经足够多，可是如何作到更好的自动化和持续集成，那就须要TDD来指引方向。
• Snapshot Testing 快照测试，其实我是很承认快照这种形式，但须要改进其工做流，至少结合Image Snapshot和Storybook等工具，甚至更应该放到CI上去。#311

下面我就来结合具体场景，进一步实例化这些问题，举几个🌰：

1. 在 TDD 作完Tasking列完实例化数据以后，彻底没有UT基础不知道该怎么写单元测试？

// Given
一个彻底没有UT基础的新人🚶
// When
当他🚶阅读和练习本文的Jest的部分
// Then
他可以把Given/When/Then的套路学会
他可以学会Jest的基本用法，包括测试suite和断言等语法
他可以学会Jest中测试异步的几种方式
复制代码

2. 在Vue应用的单元测试中，对UI组件和vuex store等测试的区别有何不一样？颗粒度该细到什么程度？

// Given
一个有基本的UT知识但没写过Vue测试的新人🚶
// When
当他🚶阅读和练习本文的Vue单元测试的部分
// Then
固然，他可以学会Vue组件在测试当中的几种渲染方式
他可以学会UI组件的分类，特别是交互行为的测试方式
他可以对Vuex概念的理解更加深刻，且知道 `Redux-like` 架构的好处
他可以合理测试vuex store的mutation和getter中的业务逻辑
他可以测试组件如何正确dispatch action以及action中如何作异步操做
复制代码

3. Vue项目中测试收益如何最大化，如何配置高性价比的测试策略，即什么地方到底该花力气测试，什么地方又能够暂且放一放？

// Given
一个具有UT基础但找不到着力点的求索之徒🐒
// When
当他🚶阅读本文的Vue应用测试策略部分
// Then
他可以找到测试的重点，从新燃起对UT的热情🔥
他可以在项目背景下合理配置单元测试的测试策略
复制代码

因而乎，这就是本系列文章的大纲，先放出来给你们一个对于Vue应用单元测试的全局观：

## 单元测试基础

### 为何选择 Jest
### Jest 的基本用法
### 该如何测试异步代码？
### 单元测试与自动化的意义

## Vue 单元测试

### Vue 组件的渲染方式
### Wrapper `find()` 方法与选择器
### UI 组件交互行为的测试

## Vuex 单元测试

### CQRS 与 `Redux-like` 架构
### 如何对 Vuex 进行单元测试
### Vue组件和Vuex store的交互

## Vue应用测试策略

### 单元测试的特色及其位置
### 单元测试的关注点
### 应用测试的测试策略
复制代码

---

😯 哦豁，正文终于开始……

---

为何要有单元测试？

引用好友鲜明的观点就是：写很差是能力问题，不写则是态度问题。单元测试客观上可让开发者的工做更高效，Vue 应用的单元测试是必定要的。

单元测试的上下文

谈任何东西都必定要有个上下文。你的论述不能是「由于单元测试有这些好处，因此咱们要作单元测试」，而应该是「不作单元测试咱们会遇到什么问题」，这样才能回答「为何要写单元测试」的问题。那么咱们谈论单元测试的上下文是什么呢？不作单元测试咱们会遇到什么问题呢？

上图为一个产品从 idea 分析、设计、开发、测试到交付并获取市场反馈的过程。

而单元测试的上下文就是存在于「敏捷」当中。敏捷为的是更快地交付有价值的可工做的软件。为此，它有一个指标来度量这个「更快」，那就是 lead time，它度量的是一个 idea 从提出被验证，到最终上生产环境面对用户的时间。显然，这个时间越短，软件得到反馈的时间就越短，对价值的验证就越快发生。

单元测试的意义

这个结论对咱们写不写单元测试有什么影响呢？答案是，不写单元测试，你就快不起来。为啥呢？由于每次发布，你都要投入人力来进行手工测试；由于没有测试，你倾向于不敢随意重构，这又致使代码逐渐腐化，复杂度使得你的开发速度下降。

那么在这个上下文中来谈要不要单元测试，咱们就能够颇有根据了，而不是“开发爽了就用，不爽就不用”这样含糊的答案：

• 若是你说个人业务部门不须要频繁上线，而且我有足够的人力来覆盖手工测试，那你能够不用单元测试
• 若是你说我不在乎代码腐化，而且我也不作重构，那你能够不用单元测试
• 若是你说我不在乎代码质量，好几个没有测试保护的 if-else 裸奔也不在话下，脑很差还作什么程序员，那你能够不用单元测试
• 若是你说我确有快速部署的需求，但咱们不 care 质量问题，出回归问题就修，那你能够不用单元测试

除此以外，你就须要写单元测试。若是你想随时整理重构代码，那么你须要写单元测试；若是你想有自动化的测试套件来帮你快速验证提交的完整性，那么你须要写单元测试。

单元测试与自动化的关系

综上，咱们用来谈论单元测试的「透镜」是什么呢？一言以蔽之，两点：反馈速度和自动化。

自动化回答的是要不要自动化的单元测试这个问题。测试是重构的惟一保障，也就是说，没有测试，基本上就无法重构代码（重构指的是 不改变软件可观测行为的前提下改善代码内部设计或实现 ），基本上就只能看着代码腐化。那么，基本上只要你的系统须要持续发展，你就须要单元测试。

反馈速度回答的是要不要 TDD、测试先行仍是后补这个问题。答案是，须要 TDD，最好先行，由于能够提升反馈速度，缩短反馈周期，与此同时减小没必要要的浪费。

至此，回答了「为何咱们须要写单元测试」的问题。下面让咱们来谈谈如何写好 JavaScript 代码和 Vue 应用框架的单元测试。

如何选择一个测试框架？

众所周知，JavaScript 世界里最不缺的就是轮子，测试框架也是如此。其实这里的子标题就是为何选择 Jest？有时候安于现状，只不过是由于咱们没有见过理想的模样。只有当咱们见过更好的世界和更好的测试框架，才会惊呼“原来世界是这样美好呀！我怎么都没有想到呢？”

引自技术雷达：Jest是一个“零配置”的前端测试工具，具备诸如模拟和代码覆盖之类的开箱即用特性，主要用于React和其余JavaScript框架。

咱们团队对采用JEST作前端测试的结果很是满意。它提供了一种“零配置”的开发体验，并具有诸多开箱即用的功能，好比 Mock 和代码覆盖率等。你不只能够将此测试框架应用于React.js应用程序，也能够应用于其余 JavaScript 框架。Jest 常常被炒做的功能之一是用户界面的快照测试。快照测试能够做为测试金字塔上层一个很好的补充，但请记住，单元测试仍然是坚实的基础。

一个好的测试框架，Jest 的几大好处能够涵盖为：

• Fast 天下武功，惟快不破。确实很快，虽然实测下来跟 Mocha 新版本仍是慢了些，之后找个机会再测一次。
• Opinionated 不须要你作出选择和配置，就能提供全部的东西，好比Mock（干掉Sinon）、Test Runner（干掉Karma）、Matcher（干掉Chai）、Test Coverage（内置istanbul）
• Watch Mode 守护模式。很是注重开发者体验，可以在编码的时候帮助咱们快速得到测试结果的反馈。
• Snapshot Testing 快照测试。这是值得争议的一点，前文也提到过会专门开个issue来讨论，在此再也不赘述。

最后，总结一下 Jest

Jest 做为一个测试框架，其最大的特色就在于它是一个很是有效的解决方案，不须要与其余测试库交互来执行它的工做。与此同时 Jest 很是注重开发者体验，这一点也是特别值得欣赏，如今市面上关注开发者（“人”）体验的开发框架和工具实在很少，而Jest Watch模式的核心就在于快速得到反馈，虽然我没在命令行使用而是WebStorm但亦能够与之结合。

ps: 除此以外，还有不少开发者体验亦值得细细品味与发现，特别是Jest自己来自Facebook的工程化支持也是特别棒的，这个讲述如何开发Jest的官方视频值得一看：Building High-Quality JavaScript Tools。

未完待续……

## 单元测试基础

• ### 为何选择 Jest
• ### Jest 的基本用法
• ### 该如何测试异步代码？
• ### 单元测试与自动化的意义

## Vue 单元测试

• ### Vue 组件的渲染方式
• ### Wrapper find() 方法与选择器
• ### UI 组件交互行为的测试

## Vuex 单元测试

• ### CQRS 与 Redux-like 架构
• ### 如何对 Vuex 进行单元测试
• ### Vue组件和Vuex store的交互

## Vue应用测试策略

• ### 单元测试的特色及其位置
• ### 单元测试的关注点
• ### 应用测试的测试策略

您可能也会喜欢：

• Vue 应用单元测试的策略与实践 03 - Vue 组件单元测试
• Vue 应用单元测试的策略与实践 02 - 单元测试基础
• Vue 应用单元测试的策略与实践 05 - 测试奖杯策略
• Vue 应用单元测试的策略与实践 04 - Vuex 单元测试
• Vue 应用单元测试的策略与实践 06 - 如何落地的几点建议