对于稍有开发经验的同学，在开发过程中总会遇到以下类似的问题：每次上线版本前，在电脑前蹲几个小时甚至更长时间来测试你的应用，这个过程非常无聊和痛苦。当代码的复杂度达到一定程度，当维护者人数超过一个时，你应该逐渐意识到，在开发新功能或修复bug时，你会变得更加谨慎，即使代码看起来没问题，但你心里还在疑惑：这个Feature会不会带来其他BUG？此Fix会引入其他“功能”吗？当你要重构项目中的代码时，你会花很多时间做回归测试。以上问题是大多数开发者采用的最基本的手动测试方式造成的，解决它的根本措施是引入自动化测试方案。测试的过程在实际的开发过程中，编写自动化测试代码通常是开发人员不喜欢的一个环节。大多数情况下，前端开发人员在开发完一个功能后，只是打开浏览器，手动点击，检查效果是否正确，而后很少对代码块进行管理。造成这种情况的原因主要有两个：一是业务忙，没时间写测试。另一个是不知道如何编写测试。但是这些问题不应该成为我们掌握前端自动化测试的绊脚石。而且，一旦掌握了前端自动化测试方案，对于大型项目的开发、升职加薪都有好处。在测试方面，即使是最简单的代码块也会让初学者不知所措。最常被问到的问题是“我怎么知道要测试什么？”。如果您正在编写Web应用程序，那么逐页测试用户交互的方式是一个很好的起点。但是Web应用也是由很多函数和模块组成的代码单元，同样需要进行测试。通常有两种情况：你接手的遗留代码没有写测试用例如果你必须从头实现一个新功能怎么办？对于以上两种场景，可以将测试写成代码的一部分。我正在谈论的代码检查给定函数是否产生预期的输出。一个典型的测试流程如下：1.引入被测函数2.给函数一个输入3.定义预期输出4.检查函数是否返回预期输出，仅此而已。这样看测试就没那么可怕了：输入-期望输出-验证结果。一个测试用例我们来看一个例子：//math.jsfunctionadd(a,b){returna+b}functionsubtract(x,y){returnx-y}module.exports={add,subtract}如何保证上面的代码是正确的性别？下面写个测试代码：//test.jsconst{add,subtract}=require('./math')constresult=add(1,2)constexpected=3if(result!==expected){thrownewError(`1+2应该等于${expected}，但是结果是${result}`)}constresult2=subtract(2,1)constexpected2=1if(result2!==expected2){thrownewError(`2-1应该等于${expected2},buttheresultis${result2}`)}在命令行执行nodetest.js后，会看到报错信息：Error:1+2shouldbeequalto3,buttheresultis2.非常方便通过测试代码帮助验证代码的正确性。前面例子中的测试代码封装了测试工具功能，太繁琐了。大家可以想想是不是可以更方便的封装一下，比如下面的expect(add(1,2)).toBe(3)expect(subtract(2,1)).toBe(-1)上面的测试代码就像用自然语言说话一样舒服。实现expect方法：//test.jsconst{add,subtract}=require('./math')expect(add(1,2)).toBe(3)expect(subtract(2,1)).toBe(1)functionexpect(result){return{toBe(actual){if(result!==actual){thrownewError(`期望值和实际值不相等，期望结果：${actual}，实际结果：${result}`)}}}}添加错误信息：//test.jsconst{add,subtract}=require('./math')test('测试加法',()=>{expect(add(1,2)).toBe(3)})test('测试减法',()=>{expect(subtract(2,1)).toBe(1)})functiontest(description,callback){try{callback()console.log(`${description}通过了测试`)}catch(err){console.error(`${description}没有通过测试：${err}`)}}functionexpect(result){return{toBe(actual){if(result!==actual){thrownewError(`期望值和实际值不相等，期望结果：${actual}，实际结果：${result}`)}}}}《前端世界》，你可以通过以下二维码关注。转载本文请联系Gogo前端世界公众号。
