前端测试框架Jest系列教程

开课吧开课吧锤锤2021-03-15 16:18

    前端开发主要是利用HTML、CSS、JavaScript等各种技术实现一流的Web界面。和其它方向的编程技术相比,前端更容易入门,即使是初级前端工程师,也能获得不错的薪酬待遇。今天为大家带来的教程是:前端测试框架Jest系列教程。

web

    什么是Jest?

    Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架。Jest源于Facebook两年前的构想,用于快速、可靠地测试Web聊天应用。它吸引了公司内部的兴趣,Facebook的一名软件工程师JeffMorrison半年前又重拾这个项目,改善它的性能,并将其开源。Jest的目标是减少开始测试一个项目所要花费的时间和认知负荷,因此它提供了大部分你需要的现成工具:快速的命令行接口、Mock工具集以及它的自动模块Mock系统。此外,如果你在寻找隔离工具例如Mock库,大部分其它工具将让你在测试中(甚至经常在你的主代码中)写一些不尽如人意的样板代码,以使其生效。Jest与Jasmine框架的区别是在后者之上增加了一些层。最值得注意的是,运行测试时,Jest会自动模拟依赖。Jest自动为每个依赖的模块生成Mock,并默认提供这些Mock,这样就可以很容易地隔离模块的依赖。

    为什么选择Jest?

    1.Jest可以利用其特有的快照测试功能,通过比对UI代码生成的快照文件,实现对React等常见框架的自动测试。此外,Jest的测试用例是并行执行的,而且只执行发生改变的文件所对应的测试,提升了测试速度

    2.安装配置简单,非常容易上手,几乎是零配置的,通过npm命令安装就可以直接运行了

    3.Jest内置了测试覆盖率工具istanbul,可以通过命令开启或者在package.json文件进行更详细的配置。运行istanbul除了会再终端展示测试覆盖率情况,还会在项目下生产一个coverage目录,内附一个测试覆盖率的报告,让我们可以清晰看到分支的代码的测试情况。

    4.集成了断言库,不需要再引入第三方的断言库,并且非常完美的支持React组件化测试。

    Jest到底有多简单呢?(让代码说话)

    新建文件夹然后通过npm命令安装:

    npminstall--save-devjest

    或者通过yarn来安装:

    yarnadd--devjest

    让我们来测试一个简单两个数字相加的function吧,新建Sum.js

    functionsum(a,b){

    returna+b;

    }

    module.exports=sum;

    然后新一个Sum.test.js的文件来测试我们的sumfunction:

    constsum=require('./Sum.js')

    test('test1plus2result',()=>{

    expect(sum(1,2)).toBe(3);

    })

    test('test2plus2shouldequal4',()=>{

    expect(sum(2,2)).toBe(4);

    })

    然后通过命令:jestSum.test.js运行一下测试,结果显示如下:

    项目结构非常简单,node_modules中放的instaljest时候所依赖的包。

    需要在package.json中加入下面配置:

    {

    "scripts":{

    "test":"jest"

    }

    }

    可以看到我们的两个testcase都已经测试通过了,并且显示了运行时间。就是这么简单,一个前端测试就写完了。Jest还有很多吸引人的地方,比如:

    Jest支持Babel,我们将很轻松的使用ES6的高级语法

    Jest支持webpack,非常方便的使用它来管理我们的项目

    Jest支持TypeScript

    以上就是前端测试框架Jest系列教程的全部内容,如果你想提升自己涨薪的技能,不妨点击下方图片,免费领取吧!

web

    千千万万的教程,五花八门,不如一份专业的教程,告别了四处划拉面试题,一份课程解决所有烦恼。

有用1
分享