一分钟食用前端测试框架Jest
安装
其实食用Jest是很简单的,我们只需要安装Jest即可
npm install --save-dev jest
yarn add --dev jest
pnpm add --save-dev jestESmodule
本身来说,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,其实来说,并不困难的,我会天天更新,一起学习吧,加油
原文地址：https://blog.csdn.net/weixin_45134711/article/details/144088715
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！