一分钟食用前端测试框架Jest

                                                 

安装

其实食用Jest是很简单的,我们只需要安装Jest即可

npm install --save-dev jest

yarn add --dev jest

pnpm add --save-dev jest

ESmodule

本身来说,Jest是不支持Esmodule的,他支持CommonJS,我们需要Babel改一下

npm i --save-dev babel-jest @babel/core @babel/preset-env

然后创建.babel.rc或babel.config.js,编写以下代码

module.exports = {
    // 智能预设,编译ES6语法
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    "node": "current",
                }
            }
        ],
    ],
};

就可以使用ESmodule语法了 

代码

然后,我们就可以编写你需要测试的代码了

例如我们自己编写一个main文件,包含几个函数,两个数的加减乘除等,然后测试看看会不会通过

const add = function (a, b) {
    return a + b;
}

const minus = function (a, b) {
    return a - b;
}
const multiply = function (a, b) {
    return a * b
}
const divide = function (a, b) {
    return a / b
}


export {
    add,
    minus,
    multiply,
    divide,
}

我们写了几个函数,并暴露出了相应的方法

测试

编写文件main.test.js,并编写测试代码

import {add, minus, multiply, divide} from "./main";

// 测试加法
test('adds 1 + 2 to equal 3', () => {
    expect(add(1, 2)).toBe(3);
});

// 测试减法
test('minus 2 - 1 to equal 1', () => {
    expect(minus(2, 1)).toBe(1);
});

// 测试乘法
test('multiply 1 * 2 to equal 2', () => {
    expect(multiply(1, 2)).toBe(2);
});

// 测试除法
test('divide 2 / 2 to equal 1', () => {
    expect(divide(2, 2)).toBe(1);
});

这里说明一下

test是我们的Jest 的测试函数,表明我们要测试了,接收两个参数,一个是desc(说明描述),一个是fn(回调函数)

expect是断言,意思就是,我们认为,觉得。它接收一个fn为参数

toBe是我们的匹配器,表明类似于===号的作用,带类型匹配的相等,他会拿着你的函数的结果去和toBe参数比较呢,其他的会一一解释好多的匹配器呢,请先这样看着一下

最后我们在package.json文件中,编写脚本

  "scripts": {
    "test": "jest",
    "testw": "jest --watchAll"
  },

test是表明,我们进行测试

testw 是表明我们要实时监视所有的测试文件,自动运行测试,并给出结果

                                                

结果

运行脚本

npm run test

呐,并没有错误呢

错误

假如我们写一个错误呢?

这里的最后一个divide函数,我们传递的参数是2/2,tobe也就是说,我们期望结果是3,但是函数的返回值会是2/2=1,与3不匹配,所以会报错的

// 测试除法
test('divide 2 / 2 to equal 1', () => {
    expect(divide(2, 2)).toBe(3);
});

呐,你看,遇到红的了吧,不用急,我们只要一步一步分析,红的再多我也不怕

他的意思是,我们测试了你的最后一个,错误了,期望值是3,但是收到的测试的值却是1,所以不对

我们只需要改回来即可

                                                 

最后

Jest,其实来说,并不困难的,我会天天更新,一起学习吧,加油