前端单元测试_jest工具入门

jest测试工具

1、测试

测试的工作就是在开发完成后项目上线前把守最后一关，当项目比较小，或者迭代不多的项目没必要用测试工具进行测试，在开发组件类库、框架之类的代码的时候防止别人的代价或第三方库插件影响自己的核心逻辑，用测试工具测一下。

测试会浪费大量的开发时间，测试的代码可能要比开发的代码还要多，所以小项目不咋迭代的没必要上。

缺点是不少，好处也挺重要。

1. 快速定位bug
2. 提高代码质量
3. 方便迭代、重构
4. 减少回归流程

2、测试分类

1. 黑盒测试：功能测试，在不知道代码的情况下进行的测试。
2. 白盒测试：了解代码的具体逻辑的情况下进行测试。
3. 灰盒测试：灰盒测试多用于集成测试阶段，不仅关注输出、输入的正确性，同时也关注程序内部的情况。
4. 单元测试：以最小的单元作为测试的目标进行测试。
5. 集成测试：组件什么的放到一起进行测试。
6. 其他：冒烟测试、UI测试、手工、自动化测试等等

3、测试思想/方式

1. TDD：测试驱动开发，先写测试再写代码，有利于更加专注软件设计，清晰地了解软件的需求，很好的诠释了代码即文档。
2. BDD：行为驱动开发，根据用户的行为进行测试，是一种敏捷软件开发的技术。设计测试用例的时候对系统进行定义，倡导使用通用的语言将系统的行为描述出来，将系统设计和测试用例结合起来，从而以此为驱动进行开发工作。

4、常见的测试框架

1. Mocha：提供了一个测试环境，断言库(chai)，mock(sinon)之类的需要较多配置来实现扩展
2. karma：可以在真实浏览器中测试，一般用来测试UI组件，一般配合Mocha\jasmine进行使用。
3. Ava：更轻量的单测框架。
4. Jasmine：jest的前辈，异步测试支持不好。
5. Jest：Facebook出的，基于jsdom的，用js来模拟浏览器环境，但是不能测样式相关，不需要额外集成或配置，默认支持断言，mock之类的。

5、Jest的安装及使用

官网建议使用yarn，使用npm也行，我这里就用yarn了。由于jest默认只支持node模块化的语法，所以还需要再安装一个Babel，再安装一个语法提示插件types/jest

// 初始化
yarn init -y
yarn add --dev jest


// 安装babel
yarn add @babel/preset-env

// 安装语法提示插件
yarn add @types/jest

配置.babelrc

{
   
  "presets": [
    ["@babel/preset-env",{
   
      "targets": {
   
        "node": "current"
      }
    }]
  ]
}

配置package.json

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

5.1 测试demo

创建src/sum.js

export function sum(a,b){
   
  return a + b;
}

创建sum.test.js

import {
    sum } from './src/sum';

describe('测试sum方法', () => {
   
  it('测试1+2=3', () => {
   
    expect(sum(