百度前端训练营----js单元测试

为什么要进行单元测试

单元测试慢
后期测试会找到所有 bug
单测没什么用，找不到什么 bug
我是开发，不想搞测试
…

对于整体的项目而已，单元测试是前期慢，后期快的工作。做好单元测试可以大大缩短后期的测试和改 bug 的时间

不同阶段改 bug 的时间成本

defects/KLOC 千行代码的缺陷数，又称缺陷密度

不同阶段测试花费的时间不同，越往后测试成本越高

JS 单测简介

什么是单元测试

单元测试（英语：Unit Testing)又称为模块测试，是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。

单元测试的好处

1. 预见性：有效的保证你写的代码就是你想要的结果
2. 早期性：尽可能在软件开发的早期就能发现问题
3. 说明性：单元测试可以是文档，它可以提供例子告诉别人如何使用你的代码
4. 保障性：对已有功能进行重构时，确保不会影响历史功能

单元测试框架介绍

单元测试框架的作用

基础类库用于轻松编写结构化的测试

• 标记测试方法的属性
• 提供断言方法的断言类或者提供集成这些类库的能力

测试运行器用于可自动执行一个或全部单元测试

• 已运行/未运行测试数据
• 失败的测试数据、测试失败的原因、异常栈信息

常见的 JS 测试框架

AVA

AVA is a test runner for Node.js with a concise API , detailed error output , embrace of new language features and process isolation that lets you develop with confidence🚀

tape

tap-producing test harness for node and browsers

Jasmine

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

Mocha

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

JS 测试框架衡量指标

• 运行环境的支持：Node 端和 Browser 的支持
• 并发的支持：支持并发的测试框架能够提高测试用例执行的速度
• 库的集成度：有的框架只有最基础的功能，有的库集成很多丰富的功能，开箱即用
• 社区的活跃度：一个活跃的社区能够让你在框架有问题时，得到更快的解决

Jest 场景实战

Jest 框架简介

Jest 是 Facebook 开发的一款 JavaScript 测试框架。在 Facebook 内部广泛用来测试各种 JavaScript 代码

• 轻松上手
• 高性能支持测试的并发运行
• 内置强大的断言与 mock 功能
• 内置测试覆盖率统计功能
• 内置 Snapshot 机制

环境准备

npm init -y
npm i jest -D

修改 package.json

"scripts":{
   
	"test":"jest"
}

推荐插件

ctrl+shift+p: Jest: Start All Runners

支持 ES6

安装ES6语法解析转换插件

npm i --save-dev @babel/plugin-transform-modules-commonjs

package.json

"scripts": {
   
	"test": "jest"
},
"jest": {
   
	"collectCoverage": true
},

package.json 同目录下添加 .babelrc.json

{
   
  "env": {
   
    "test": {
   
      "plugins"