全栈大前端

# 1.了解自动化测试

# 1.1 为什么要有自动化测试

如今大部分互联网团队都是走  敏捷开发  的节奏。实际上，自动化测试才是实现“敏捷”的基本保障。业务端的快速上线和快速验证对技术侧的响应力提出了更高的要求：更快上线，持续上线。再考虑到人员流动和应用逐步变大的事实，日后迭代的成本只会变得越来越高。当然这个项目迭代的成本也跟项目的复杂度有关，比如笔者所在的点餐业务，项目有足够的复杂性，有些细微的改动点其实会牵扯到很多内容，而对刚加入团队的新人就会显得不太友好。因此，项目拥有前端测试是必不可少的，它能够有效保障业务迭代的质量和稳定性。

# 1.2 自动化测试的好处

  • 防止低级误操作造成的生产事故
  • 提供描述组件行为的文档
  • 节省⼿手动测试的时间
  • 减少研发新特性时产⽣生的 bug
  • 改进设计
  • 促进重构

# 2.测试分类

图片

  • 单元测试：是指对软件中的最小可测试单元进行检查和验证，通常指的是独立测试单个函数。
  • UI 测试：是对图形交互界面的测试。
  • 集成测试：就是测试应用中不同模块如何集成，如何一起工作，这和它的名字一致。
  • 端到端测试（e2e）：是站在用户角度的测试，把我们的程序看成是一个黑盒子，我不懂你内部是怎么实现的，我只负责打开浏览器，把测试内容在页面上输入一遍，看是不是我想要得到的结果。

# 3.常用的前端测试工具

  • 单元测试: Mocha, Ava, Karma, Jest, Jasmine 等。
  • UI 测试: ReactTestUtils, Test Render, Enzyme, React-Testing-Library, Vue-Test-Utils 等。
  • e2e 测试: Nightwatch, Cypress, Phantomjs, Puppeteer 等。

# 3.1 单元测试工具特性对比

# 单元测试

图片

  • Mocha 是生态最好，使用最广泛的单测框架，但是他需要较多的配置来实现它的高扩展性。
  • Ava 是更轻量高效简单的单测框架，但是自身不够稳定，并发运行文件多的时候会撑爆 CPU.
  • Jasmine 是单测框架的“元老”，开箱即用，但是异步测试支持较弱。
  • Jest 基于 Jasmine, 做了大量修改并添加了很多特性，同样开箱即用，但异步测试支持良好。
  • Karma 能在真实的浏览器中测试，强大适配器，可配置其他单测框架，一般会配合 Mocha 或 Jasmine 等一起使用。

每个框架都有自己的优缺点，没有最好的框架，只有最适合的框架。Augular 的默认测试框架就是 Karma + Jasmine，而 React 的默认测试框架是 Jest.

Jest 被各种 React 和 Vue 应用推荐和使用。它基于 Jasmine，至今已经做了大量修改并添加了很多特性，同样也是开箱即用，支持断言，仿真，快照等。Create React App 新建的项目就会默认配置 Jest，我们基本不用做太多改造，就可以直接使用。Vue CLI 创建项目可选用 Mocha 和 Jest .

# e2e 测试

图片

Puppeteer 是 Google Chrome 团队推出的库，尽管它相对其他 e2e 框架更新，但它同样也有一个庞大的社区。它拥有更简洁易用的 API，更快的运行速度，已逐渐成为业内自动化测试的标杆，俘获大量 Selenium 用户的心。可以看下近年来 e2e 测试框架的  npm trends.

图片

# 4.工具选用及测试目标

# 4.1 工具选用

经过分析，React 项目的技术选型为  Jest + React Testing Library + Puppeteer

而对于 Vue 的项目，为了保持技术栈的统一，我们选用了  Jest + Vue-Test-Utils + Puppeteer

# 4.1 测试目标

  • ** 阶段一：项目中使用单元测试（** **Jest + Vue-Test-Utils）****完成对项目主体功能及核心组件的覆盖**

例如：

登录、菜单栏，公共组件等一些核心模块是否能正常使用

这些主体功能测试通过才能自动化部署到线上

  • ** 阶段二：增加单元测试覆盖率，使用 e2e（**Puppeteer）**测试部分核心业务模块**

# 5.用例编写与常规操作

# 5.1 编写说明

Vue-CLI@3 生成了 Vue 项目。本身默认都有 Jest 的配置，不需做大的改动。

  • 单元测试和 UI 测试的文件夹统一命名为  tests，测试文件以 .test.js 为后缀
  • 将  tests  文件夹与它们正在测试的代码放在同级目录下，以便相对路径导入时路径更短
  • e2e 测试的文件夹命名为 e2e，并与 src 同放在根目录下
  • VScode 和 WebStorm 都有对应的 Jest 插件，安装后书写代码时有代码补全，debug 和自动运行等功能

# 5.2 编写原则

  • 测试代码时，只考虑测试，不考虑内部实现
  • 数据尽量模拟现实，越靠近现实越好
  • 充分考虑数据的边界条件
  • 对重点、复杂、核心代码，重点测试
  • 利用  AOP(beforeEach、afterEach)，减少测试代码数量，避免无用功能
  • 测试、功能开发相结合，有利于设计和代码重构

# 5.3 Jest 常用 API

  • describe ： 定义⼀一个测试套件
  • it ：定义⼀一个测试⽤用例例
  • expect ：断⾔言的判断条件
  • toBe ：断⾔言的⽐比较结果
  • jest.useFakeTimers()，jest.runAllTimers()，jest.useRealTimers() 延时函数

**更多 API 详见 **https://jestjs.io/docs/en/api (opens new window)

# 5.4 Vue Test Utils 常用 API

  • mount ： 挂载组件
  • trigger ：模拟点击
  • contains ：可判断某个 dom 是否存在

**更多用法详见 **https://vue-test-utils.vuejs.org/zh/guides/ (opens new window)

# 5.5 生成测试覆盖率报告

只需要在 jest 命令后加入 --coverage 即可

jest --coverage

图片

# # 6.持续集成

# ## 方案一.测试不通过就阻止代码 git 提交

安装 husky：cnpm i husky --save

配置 husky，在 package.json

"husky": {

"hooks": {

"pre-commit": "npm test",

"pre-push": "npm test",

"...": "..."

}

}

当然这是文档的，我们要按我们所需的改成

"husky": {

"hooks": {

"pre-commit": "npm run test:unit"

}

}

代表再提交（commit）前先执行 npm run test:unit

# 方案二.测试不通过就阻止打包发布

先执行 npm run test:unit

再执行 npm run build

npm run test 报错则不会执行 npm run build 命令，从而阻止 jenkins 打包

# 推荐阅读

来聊聊我们为什么要写单测 (opens new window)

← 灰度发布 →