Facebook的三大项目：yarnjestmetro，有横扫宇宙的潜力。玩笑项目的目的是降低测试一个项目的时间成本和认知成本。——其实是让你成为一名好老师。jest文档非常简洁且难以阅读，因此才有了这篇文章。jest是vue、react和vue-cli技术栈的重要组成部分，也是目前最值得测试的框架，需要非常熟悉。本文github地址：https://github.com/wanthering...教育与测试相通。可以自学，但是掌握系统的、系统的知识，最终还是离不开良师益友。你不需要写测试，但是当你面对大型复杂的项目时，没有测试框架是很难前进的。现在，你可以跟着我一步步学习jest，你就会明白：为什么jest优雅、简洁、人性化，最终会成为测试界唯一最好的解决方案。第1课：开玩笑的初步使用想象一下，当你走上讲台时，有50多个孩子在静静地注视着你。红红的脸颊，大大的眼睛。接下来，你把课本上的知识教给了他们。功能操作过程相当于你的教学过程。请跟我一起敲代码：（请在项目下创建文件：lesson1.js）lesson1.js/***加法是将多个值逐个相加*/exports.sum=(...args)=>{letres=0for(letiofargs){res+=i}returnres}/***乘法是累加b个重复值a*/exports.times=(a,b)=>{letresArr=(newArray(b)).fill(a)returnexports.sum(...resArr)}以上文件涉及到es6和nodejs模块化的基础知识，乍一看可能不是很明显很容易理解，但是相信我，当你输入下面的测试代码后，你就会明白它的意思——就像教学生一样。就像你们js工程师面临的永恒难题——真的能跑通吗？作为老师的您，也被吓到了。这是你第一次教这个，他们真的能听懂吗？这时候就需要使用jest来进行测试了。使用npm安装：npmijest-S合格的老师会做这些步骤：提出问题：明确指出问题。请人回答：给一个函数体，运行测试。期待答案：expect()检查答案：toBe(),toEqual()创建一个lesson1.test.jslesson1.test.jsconst{sum,times}=require('./lesson1')test('Student,mayI请问这个累加结果是什么？',()=>{expect(sum(2+2+2+2+2+2)).toBe(12)})test('同学，这个结果是什么multiplication?',()=>{expect(times(2,6)).toBe(12)})test('那么，这两个数的结果是否相等？',()=>{expect(times(2,6)).toEqual(sum(2+2+2+2+2+2))})运行测试方法一：此时需要运行jest命令，可以全局安装jest：npmijest-g然后jestlesson1.test.js运行测试方法二：也可以在packagejson的test字段写..."scripts":{"test":"jest"},...然后输入npmtest在命令行运行测试方法三：如果你使用webstorm等IDE的话，文档中会直接显示绿色小按钮，点击即可。测试结果：接下来一路会看到一个pass，证明lesson1.js文件是正确的。我们学了这么多年，深知好老师和坏老师的区别：上课照本宣科，就像直接在页面上写js代码一样。这是赖皮沟老师的拿手好戏。但是一个优秀的老师，他会：循序渐进：把它分解成很多分测验，把知识点一个一个分解。版本清晰：标明需要测试的内容，让知识易学易记。课堂互动：在回调函数中运行测试，调动孩子的课堂积极性。丰富的题型：通过匹配器验证不同格式的数据，即toBe、toEqual等。如果你对jest框架提供的各种匹配器不是很熟悉，这里给你一张备忘单：jest-cheat-sheet你看，jest做了什么，没有多余的步骤，也没有漏掉必要的步骤，这正是我们这些年遇到的好老师的共同特点，也是笑话测试的极致。第二课：异步测试获取数据Jest在异步过程中也很方便！我们先使用json-server搭建服务器，然后使用axios获取数据。这两个npm包应用广泛，熟悉的axios包可以直接复制server.js和request.js代码。下载:npmijson-serveraxios-S创建server.js文件server.jsconstjsonServer=require('json-server')constdefaultData=()=>({'lesson':[{'id':1,'title':'如何相加','teacher':'王老师'},{'id':2,'title':'如何相乘','teacher':'刘老师'},{'id':3,'title':'怎么减','teacher':'韩老师'}],'homework':[{'id':1,'works':['add','multiply'],'student':'JimGreen'},{'id':2,'title':['add','subtract'],'student':'lily'},{'id':3,'title':['add','subtract'],'student':'lucy'},{'id':4,'title':['add','subtract','multiply'],'student':'韩梅梅'},{'id':5,'title':['减法','multiply'],'student':'李雷'}],'exam':{'name':'小学期末考试'}})constcreateJSONServer=(data=defaultData())=>{constserver=jsonServer.create()constrouter=jsonServer.router(data)constmiddlewares=jsonServer.defaults()server.use(middlewares)服务器.use(router)returnserver}createJSONServer().listen(3000)console.log('3000端口已连接')创建request.js文件request.jsconstaxios=require('axios')classHttpRequest{constructor(baseUrl='http://localhost:3000'){this.baseUrl=baseUrl}/***返回默认配置*/getInsideConfig(){return{baseURL:this.baseUrl,headers:{}}}/***响应column,返回指定格式信息*/interceptors(instance){instance.interceptors.response.use(res=>{const{data}=resreturndata},error=>{returnPromise.reject(error)})}/***处理网络请求*/request(options){constinstance=axios.create()options=Object.assign(this.getInsideConfig(),options)this.interceptors(instance)returninstance(options)}}/***导出请求模块*/exports.requestPromise=(port,method='get')=>{constHttp=newHttpRequest('http://localhost:3000')returnHttp.request({url:port,method})}exports.requestCallback=(cb,端口,method='get')=>{constHttp=newHttpRequest('http://localhost:3000')Http.request({url:port,method}).then(data=>{//▽请注意如果回调有效，请删除以下行并重试？cb(data)})}使用节点服务器运行服务，我们可以开始测试异步回调。一个上课从不认真听讲，却很受欢迎的坏学生。这时，如果你问一个问题，让坏学生回答，他什么也不做，只是静静地站起来，过了一会儿，他就会对你说：“老师，这道题我已经回答过了！”点点头，“是的，他回答了。”这个时候，你该怎么办？你是否曾有过深深的绝望感？看看下面的例子。创建lesson2.test.js并写入lesson2.test.jsconst{requestPromise,requestCallback}=require('./request')test('异步回调检测',()=>{//下面抛出两个断言made,functioncallback(data){expect(data).toStrictEqual({'id':1,'title':'howtoadd','teacher':'王老师'})}断言前requestCallback(callback,'lesson/1')})有效，一切似乎都有效。..但是当我们回到request.js，注释掉cb(data)，我们就知道回调函数没有返回数据，应该测试失败。然而。.还是通关了！这是因为requestCallback根本没有进入函数体，测试函数只要不报错就认为通过了。异步回调就是这么个烂生，经常假装回答，侥幸逃脱。异步回调的正确测试方法：身为老师的你可能想到了打死坏学生的方法：“写在黑板上，写完了告诉我！”你可以在测试函数中提供一个done，done必须在之后调用，才能通过测试。lesson2.test.jstest('异步回调方法检测',done=>{//下面抛出两个断言，functioncallback(data){expect(data).toStrictEqual({'id':1,'title':'如何添加','teacher':'王老师'})done()}requestCallback(callback,'lesson/1')})这样必须运行回调才能通过测试否则会超时并报错。除了上述方法外，还可以检查函数体中的断言，多运行几次expect.assertions(1);functioncallback(data){expect(data).toStrictEqual({'id':1,'title':'howtoadd','teacher':'王老师'})}requestCallback(callback,'lesson/1')})expect.assertions(1)的意思是断言语句expect(xxx).toXXX(xxx)必须跑一遍，当要测试多个“坏学生”异步回调时，这个trick还是管用的。普通生：AsynchronousPromise有差生，自然有好学和普通生，promise是“普通生”lesson2.test.jstest('AsynchronousPromise方法检测',()=>{expect.assertions(1);returnrequestPromise('exam').then(data=>{expect(data).toStrictEqual({'name':'小学期末考试'})})})测试异步Promise时必须使用return，否则为像个“坏学生”一样，一溜烟溜走了。您还可以使用.resolve/.reject形式lesson2.test.jstest('异步Promise方法已成功解析',()=>{expect.assertions(1);returnexpect(requestPromise('exam')).resolves.toStrictEqual({'name':'小学期末考试'})});如果你需要检查Promise是否被拒绝：test('AsynchronousPromisemethodisrejected',()=>{expect.assertions(1);returnexpect(requestPromise('exam')).rejects.toMatch('error')});三个好学生：async/await异步课从不迟到，校服总是一尘不染，作业总是按时交，上课认真做笔记，答题无懈可击，别人不听课，她来玩！小的！报告！告诉！这就是我们的async/await，我们应该多出这样的好学生。lesson2.test.jstest('Asynchronousasync/awaitdetection',async()=>{//下面抛出两个断言，可以expect.assertions(2)constlesson1=awaitrequestPromise('lesson/1')consthomework3=awaitrequestPromise('homework/3')expect(lesson1).toStrictEqual({'id':1,'title':'howtoadd','teacher':'王老师'})expect(homework3).toMatchObject({'student':'lucy'})})优雅、舒适、简洁、大方。不用说，async/await值得拥有。虽然我们经常和异步回调和异步Promises打交道……第三课：Mock函数，如果袖口五杠的纪律委员不是简单的测试同步返回和异步返回，而是需要记录执行过程呢地位？constforEach=(arr,fn)=>{if(!arr.length||!fn)returnleti=-1letlen=arr.lengthwhile(++i
