前端自动化测试 - Jest基础配置篇（一）

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

Jasmine ： JavaScript测试框架（BDD），这个也算是比较早的测试框架。
MOCHA: 它是一个功能丰富的JavaScript测试框架，运行在Node.js和浏览器中，使异步测试变得简单有趣。也是非常优秀的框架。
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配置文件，根据配置文件进行转换，转换完成，再进行测试。

前端自动化测试 - Jest异步请求篇（二）
前端自动化测试 - Jest钩子函数篇（三）