Javascript单元测试现状、难点及解决方案

原文地址：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%)。

来自：http://dailyjs.com/2012/12/24/javascript-survey-results/

如下图：

不难看出连续两年，Jasmine的市场占用额是比较多的，这也是我们之所以选Jasmine作为单元测试框架的原因之一。

Javascript单元测试难点

高耦合的JavaScript代码

       高耦合的JavaScript代码很难找到单元测试的切入点，也很难写出高效的测试代码。

DOM的交互

       与DOM交互测试难处在于：你需要准备测试对应的HTML代码片段，然后让你想测试的JavaScript在HTML上执行，最后在验证DOM上面元素的变化。

Ajax和异步响应方法

       涉及到Ajax的部分比较不太好进行单元测试, 难点有几个：

1. 1.        异步响应, 必须有stop() 方法才可能进行；

   2.        数据在传递过程中容易出错。

Javascript单元测试解决方案

       对于高耦合的JavaScript代码，我们需要的不是从如何写单元测试下手。而是需要从本身代码下手，对我们原来的代码进行解耦，使其可测试。我们可以利用一些框架来强化我们的JavaScript框架和标准（JavaScriptMVC, Backbone.js, Knockout.js, RequireJS和CommonJS等）。

       如果我们第一点做好了，那么我们第二个难点就好解决了。将我们的脚本涉及的DOM最小化，然后我们在测试的前插入到body中，当监测完它的变化并测试完后再将这个DOM删除。这里的复杂度和性能的高低，取决与你JavaScript的设计。当然这里你也可以将这些必须的HTML代码直接写在Reporter页面，这里不推荐这种方法。

       Ajax的JavaScript单元测试方法有三种：

           1. 测试发送数据；

           2. 测试接收数据；

           3. 测试页面响应（例如刷新页面的变化）

       这里推荐使用第一种方法