# 市面上主流的前端测试框架

  1. Jasmine : JavaScript 测试框架(BDD),这个也算是比较早的测试框架。
  2. MOCHA: 它是一个功能丰富的 JavaScript 测试框架,运行在 Node.js 和浏览器中,使异步测试变得简单有趣。也是非常优秀的框架。
  3. Jest:目前最流行的前端测试框架,几乎国内所有的大型互联网公司都在使用。

# Jest 优点:

比较新,性能好、功能多、简单易用,单独模块测试功能(测试快),API 简单,隔离性好,IDE 整合,多项目并行,快出覆盖率...


# 1. 环境搭建(本地需要 node 环境)

在本地新建一个文件夹,进入文件夹,然后命令行执行:

npm init  // 快速生成一个 package.json 文件
npm install jest@24.8.0 -D

# 2. 简单 demo 测试

在根目录新建文件 index.js index.test.js

//index.js
function kecheng1(money){
    return money>=200? '名师辅导':'自学'
}
function kecheng2(money){
    return money>=1000? '双语教程':'普通教程'
}
module.exports = {
    kecheng1,kecheng2  
}
//index.test.js
const xuexi = require('./index')
const { kecheng1 , kecheng2 }  = xuexi
test('学习1 300元',()=>{
    expect(kecheng1(300)).toBe('名师辅导')
})
test('学习2  2000元',()=>{
    expect(kecheng2(2000)).toBe('双语教程')
})

你发现在文件名是有 test 的,对,这个文件就是用来测试 index.js 文件的,Jest 会自动找对应的 test 作为测试文件,所以我们这里也使用了.test 文件名,其中:

  • test 方法:Jest 封装的测试方法,一般填写两个参数,描述和测试方法
  • expect 方法 :预期方法,就是你调用了什么方法,传递了什么参数,得到的预期是什么 (代码中详细讲解)

# 3. 基本配置和测试覆盖率

什么是 “单元测试”? 什么是 “集成测试”

  • 单元测试:英文是 (unit testing) 单,是指对软件中的最小可测试单元进行检查和验证。前端所说的单元测试就是对一个模块进行测试。也就是说前端测试的时候,你测试的东西一定是一个模块。
  • 集成测试:也叫组装测试或者联合测试。在单元测试的基础上,将所有模块按照涉及要求组装成为子系统或系统,进行集成测试。
npx jest --init
//Choose the test environment that will be used for testing ?(Web) 代码是运行在 Node 环境还是 Web 环境下?
//Do you want Jest to add coverage reports ? (y) 是否生成测试覆盖率文件?
//Automatically clear mock calls and instrances between every test?(y) 是否需要在测试之后清楚模拟调用的一些东西?
// 你会发现你的工程根目录下多了一个 jest.config.js

# 4.Jest 中的匹配器

toBe() 匹配器,是在工作中最常用的一种匹配器,简单的理解它就是相等。这个相当是等同于 === 的,也就是我们常说的严格相等
toEqual() 内容相等,就可以通过测试
toBeNull() 匹配器只匹配 null 值,需要注意的是不匹配 undefined 的值
toBeUndifined() 匹配 undefined 时,就可以使用 toBeUndifined () 匹配器
toBeDefined() 匹配器的意思是只要定义过了,都可以匹配成功
toBeTruthy() 是 true 和 false 匹配器,就相当于判断真假的
toBeFalsy() 有真就有假,跟 toBeTruthy () 对应的就是 toBeFalsy, 这个匹配器只要是返回的 false 就可以通过测试
toBeGreaterThan() 这个是用来作数字比较的,大于什么数值,只要大于传入的数值,就可以通过测试
toBeLessThan () toBeLessThan 跟 toBeGreaterThan 相对应的,就是少于一个数字时,就可以通过测试
toBeGreaterThanOrEqual () 数据大于等于期待数字时,可以通过测试
toBeLessThanOrEqual () 跟 toBeGreaterThanOrEqual () 相对应
toBeCloseTo() 这个是可以自动消除 JavaScript 浮点精度错误的匹配器,举个例子,比如我们让 0.1 和 0.2 相加,这时候 js 得到的值应该是 0.30000000000004, 所以如果用 toEqual () 匹配器,测试用例会通过不了测试的
toMatch() 字符串包含匹配器
toContain() 数组的匹配器
toThrow() 专门对异常进行处理的匹配器,可以检测一个方法会不会抛出异常
not 匹配器是 Jest 中比较特殊的匹配器,意思就是相反或者说取反。比如上面的例子,我们不希望方法抛出异常,就可以使用 not 匹配器

const throwNewErrorFunc = ()=>{
    throw new Error('this is a new error')
}
test('toThrow匹配器',()=>{
    expect(throwNewErrorFunc).not.toThrow()
})

更多匹配器 https://jestjs.io/docs/en/expect

# 5. 让 Jest 支持 import 和 ES6 语法

目前我们的 Jest 是不支持 import...from.... 这种形式,如果使用就会报错,因为 Jest 默认支持的是 CommonJS 规范,也就是 Node.js 中的语法,他只支持 require 这种引用。所以我们使用 import...from...ES6 的语法,所以使用就会报错。我们找到了报错的原因后,就非常好解决了,只要我们把 import 形式转行成 require 就可以了呗。

打开 index.js index.test.js

//index.js
export function kecheng1(money){
    return money>=200?'名师辅导':'自学'
}
export function kecheng2(money){
    return money>=1000?'双语教程':'普通教程'
}
//index.test.js
import {kecheng1,kecheng2} from './index.js'
test('学习1 300元',()=>{
    expect(kecheng1(300)).toBe('名师辅导')
})
test('学习2  2000元',()=>{
    expect(kecheng2(2000)).toBe('双语教程')
})

这时候你用 npm run test 来测试,你会发现是没办法使用的,会报很多错误。这是因为我们需要用 Babel 进行转换,没有 Babel 转换是肯定会报错的。

# 6.Babel 转换器的安装

其实解决这个问题,直接使用 Babel 就可以把代码转换成 CommonJS 代码,然后就可以顺利进行测试了。那现在就来安装一下 Babel

npm install @babel/core@7.4.5 @babel/preset-env@7.4.5 -D

耐心等待 babel 安装完成,然后打开 package.json 文件,可以看到文件里有这样两行代码。

"devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "jest": "^24.8.0"
  },

看到这样的代码,说明 Babel 已经安装成功。然后我们还需要对 Babel 进行配置。

Babel 的基本配置
我们在项目根目录下新建一个 .babelrc 的文件,作为一个前端,你对这个文件应该是非常熟悉的,babel 的转换配置就写在这个文件里。

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

当你写完这段代码后,就可以进行转换了。我们再次使用 npm run test 进行测试,这时候就可以正确通过测试了。也就是说我们用的 babel 起到作用了。

那为什么会这样那?其实在 Jest 里有一个 babel-jest 组件,我们在使用 npm run test 的时候,它先去检测开发环境中是否安装了 babel ,也就是查看有没有 babel-core ,如果有 bable-core 就会去查看 .babelrc 配置文件,根据配置文件进行转换,转换完成,再进行测试。