原文地址:http://www.monring.com/front_end/javascript-unit-test-case.html
单元测试在后台开发中非常流行和普及,在前端开发中则使用的非常少;在前端JavaScript单元测试在类库中的应用还是非常普及,但在真实项目中应用还是不太广泛;就算能在项目中应用到,覆盖率也不是特别高。
Javascript单元测试现状
根据一些论坛的调查数据,我们可以看到超过半数以上的开发人员是不写单元测试的,我们下面看看这些数据,以及一些前端测试框架的市场占有额吧。
2011年报告: 58%的人不写测试;Jasmine (44%);QUnit (41%);Vows(13%);Express/Mocha(11%);Nodeunit(8%)。
2012年报告:51%的人不写测试;Jasmine (45%); Mocha(41%);QUnit (31%);Vows(8%)。
如下图:
不难看出连续两年,Jasmine的市场占用额是比较多的,这也是我们之所以选Jasmine作为单元测试框架的原因之一。
Javascript单元测试难点
高耦合的JavaScript代码
高耦合的JavaScript代码很难找到单元测试的切入点,也很难写出高效的测试代码。
DOM的交互
与DOM交互测试难处在于:你需要准备测试对应的HTML代码片段,然后让你想测试的JavaScript在HTML上执行,最后在验证DOM上面元素的变化。
Ajax和异步响应方法
涉及到Ajax的部分比较不太好进行单元测试, 难点有几个:
-
异步响应, 必须有stop() 方法才可能进行;
-
数据在传递过程中容易出错。
-
Javascript单元测试解决方案
对于高耦合的JavaScript代码,我们需要的不是从如何写单元测试下手。而是需要从本身代码下手,对我们原来的代码进行解耦,使其可测试。我们可以利用一些框架来强化我们的JavaScript框架和标准(JavaScriptMVC, Backbone.js, Knockout.js, RequireJS和CommonJS等)。
如果我们第一点做好了,那么我们第二个难点就好解决了。将我们的脚本涉及的DOM最小化,然后我们在测试的前插入到body中,当监测完它的变化并测试完后再将这个DOM删除。这里的复杂度和性能的高低,取决与你JavaScript的设计。当然这里你也可以将这些必须的HTML代码直接写在Reporter页面,这里不推荐这种方法。
Ajax的JavaScript单元测试方法有三种:
1. 测试发送数据;
2. 测试接收数据;
3. 测试页面响应(例如刷新页面的变化)
这里推荐使用第一种方法