02|初识jest

在上篇文章中，我们通过封装代码的方式，实现了我们的代码测试。从本片文章中，我们将引入正式引入jest，开启jest的测试之旅。

一、安装jest以及配置运行环境

安装jest非常简单，可以通过yarn和npm进行安装

npm install jest
yarn add jest

然后在package.json中的scripts中添加运行时命令

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

这样，我们就可以非常愉悦的使用npm run test 来启动我们的程序了。但是，我们发现，程序挂了，报错说test' is not defined 。经过排查，是jest祝版本号变动引起的错误，我们应该将npm的版本号降到24.8.0才能进行。所以我们还需要手动降低一下jest包的版本。

二、编写测试文件

测试文件跟上一篇文章的差别不大。项目目录一致，这里就简单把相关的代码贴出一下。

main.js

function add(a, b){
    return a + b
}

function sub(a, b){
    return a - b
}

function mutil(a, b){
    return a * b
}

module.exports = {
    add,
    sub,
    mutil
}

main.test.js

const { add, sub, mutil } = require('./math')

test('测试加法 3 + 7', () => {
    expect(add(3,7)).toBe(10)
})

test('测试减法 4 - 1',() => {
    expect(sub(4,1)).toBe(3)
})

test('测试乘法 3 * 3',() => {
    expect(mutil(3,3)).toBe(9)
})

运行 npm run test，显示很完美。

image.png

我们将math.js中的任一方法修改，再来查看一下运行结果

function mutil(a, b){
    return a + b
}

image.png

报错信息也很完善~~~

三、jest的更多配置

我们可以通过npm run jest来运行测试用例，这是因为jest内部设置一些默认的配置信息，这跟webpack比较类似，要实现更所的配置，我们可以将jest的配置文件暴露出去。使用下面的命令：

npx jest --init

image.png

npx jest --coverage

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

.babelrc

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

npm run jest
jest (babel-jest)
babel-core
取.babelrc的配置
在运行测试之前，结合babel，先把你的代码一次性转化
运行转化后的测试用例代码
math.test.js

import { add, sub, mutil } from './math'

test('测试加法 3 + 7', () => {
    expect(add(3,7)).toBe(10)
})

test('测试减法 4 - 1',() => {
    expect(sub(4,1)).toBe(3)
})

test('测试乘法 3 * 3',() => {
    expect(mutil(3,3)).toBe(9)
})

流程：
npm run test
jest (babel-jest)
babel-core
取 .babelrc 配置
在运行测试之前，结合babel，先把你的代码做一次转化
运行转化过的测试用例代码