QUnit是一个非常简单而且强大的单元测试框架，简单到稍微懂点javascript的人，5分钟不到就会了，以下就是这个框架的用法：

首先，既然是一个框架，肯定有框架的共有特征（框架的css->qunit.css,框架的js函数库->qunit.js，框架的HTML 显示页面->framework.html，我们按照规范放置在应该放置的地方，如下图所示：）

QUnit 5分钟教程_第1张图片

既然是javascript测试框架，那么肯定就有两部分组成，一部分是被测试的javascript函数，另一部分是测试语句的javascript函数，我们分别建2个文件夹(needTestJS和tcJS来放置）。

 

Part 1: 被测试的javascript函数：

我们这里写了两个函数，按照QUnit的建议，我们为其定义一个测试模块（模块化嘛）一个用于测试参数是否为数字，一个用于测试传入的数是否为偶数：

   
   
   
   
    
    
    
    
    
  1. //定义测试模块 
    2. 
    
    
    
    
  2. module ("测试示例"); 
    3. 
    
    
    
    
  3. //定义一个简单的函数，判断参数是不是数字 
    4. 
    
    
    
    
  4. function  isNumber (para){ 
    5. 
    
    
    
    
  5.     if (typeof para=="number") { 
    6. 
    
    
    
    
  6.         return true; 
    7. 
    
    
    
    
  7.     }else{ 
    8. 
    
    
    
    
  8.         return false; 
    9. 
    
    
    
    
  9.     } 
    10. 
    
    
    
    
  10. } 
    11. 
    
    
    
    
  11.  
    12. 
    
    
    
    
  12. //这个函数用于判断传入的数是不是偶数 
    13. 
    
    
    
    
  13. function isEven(val) { 
    14. 
    
    
    
    
  14.     return val % 2 === 0; 
    15. 
    
    
    
    
  15. } 
    16.

 

Part 2:测试用例：

测试用例也是javascript函数，我们必须用测试断言来构造这些测试用例，有很多种测试断言，最常用的几种有：ok() ,equals(),same()，具体他们用在什么场合见我的代码注释部分：

   
   
   
   
    
    
    
    
    
  1. //开始单元测试 
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. //test的第一个参数是展现在页面上的这个测试集合的名称，可以指定任何有意义的名字 
    4. 
    
    
    
    
  4. test('isNumber()',function(){ 
    5. 
    
    
    
    
  5.     //列举各种可能的情况，保证每种条件应该符合的逻辑 
    6. 
    
    
    
    
  6.      
    7. 
    
    
    
    
  7.     //ok 是QUnit中最常见的用于判断的函数，不过只能判断true和false 
    8. 
    
    
    
    
  8.     //正确，则绿色的条子，错误就会爆红 
    9. 
    
    
    
    
  9.     ok (isNumber(2), "2是一个数字"); 
    10. 
    
    
    
    
  10.     ok(!isNumber("2"),"字符串2不是一个数字"); 
    11. 
    
    
    
    
  11.     ok(isNumber(NaN),"NaN是一个数字"); 
    12. 
    
    
    
    
  12.      
    13. 
    
    
    
    
  13.  
    14. 
    
    
    
    
  14.      
    15. 
    
    
    
    
  15. } 
    16. 
    
    
    
    
  16. ); 
    17. 
    
    
    
    
  17.  
    18. 
    
    
    
    
  18.  
    19. 
    
    
    
    
  19.  
    20. 
    
    
    
    
  20. test("isEven()" ,function(){ 
    21. 
    
    
    
    
  21.      
    22. 
    
    
    
    
  22.  
    23. 
    
    
    
    
  23.     //equals(actual,expected,[message]) 用于相当的判断函数 
    24. 
    
    
    
    
  24.     equals(true ,isEven(2),'2是偶数'); 
    25. 
    
    
    
    
  25.     equals(false,isEven(3),'3不是偶数'); 
    26. 
    
    
    
    
  26. } 
    27. 
    
    
    
    
  27. ); 
    28. 
    
    
    
    
  28.  
    29. 
    
    
    
    
  29.  
    30. 
    
    
    
    
  30. test("恒等断言" ,function(){ 
    31. 
    
    
    
    
  31.      
    32. 
    
    
    
    
  32.     //same()是恒等断言，可以用来判定2个对象是否相等（可以不相同） 
    33. 
    
    
    
    
  33.     same( {}, {}, 'passes, objects have the same content'); 
    34. 
    
    
    
    
  34.     same( {a: 1}, {a: 50} , 'passes'); 
    35. 
    
    
    
    
  35.     same( [], [], 'passes, arrays have the same content'); 
    36. 
    
    
    
    
  36.     same( [1], [1], 'passes'); 
    37. 
    
    
    
    
  37. } 
    38. 
    
    
    
    
  38. ); 
    39.

 

Part 3: 显示结果：

测试，要调用这些测试方法和显示结果（无数java developer的为绿条而欢呼雀跃，为红条而忧伤，QUnit中沿用了JUnit中的颜色设定风格），我们必须要有个底座，幸运的是,QUnit框架已经为我们提供了这个底座(HTML页面)，我们只需要吧被测试的js和测试用例js添加进去，如下所示：

   
   
   
   
    
    
    
    
    
  1. > 
    2. 
    
    
    
    
  2. <html> 
    3. 
    
    
    
    
  3. <head> 
    4. 
    
    
    
    
  4.     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    5. 
    
    
    
    
  5.     <title>QUnit Test Suitetitle> 
    6. 
    
    
    
    
  6.     <link rel="stylesheet" href="../css/qunit.css" type="text/css" media="screen"> 
    7. 
    
    
    
    
  7.     <script type="text/javascript" src="../js/qunit.js">script> 
    8. 
    
    
    
    
  8.      
    9. 
    
    
    
    
  9.     <script type="text/javascript" src="../project/needTestedJS/module.js">script> 
    10. 
    
    
    
    
  10.      
    11. 
    
    
    
    
  11.     <script type="text/javascript" src="../project/tcJS/moduleTest.js">script> 
    12. 
    
    
    
    
  12. head> 
    13. 
    
    
    
    
  13. <body> 
    14. 
    
    
    
    
  14.     <h1 id="qunit-header">QUnit测试套件h1> 
    15. 
    
    
    
    
  15.     <h2 id="qunit-banner">h2> 
    16. 
    
    
    
    
  16.     <div id="qunit-testrunner-toolbar">div> 
    17. 
    
    
    
    
  17.     <h2 id="qunit-userAgent">h2> 
    18. 
    
    
    
    
  18.     <ol id="qunit-tests">ol> 
    19. 
    
    
    
    
  19. body> 
    20. 
    
    
    
    
  20. html> 
    21.

 

然后我们就可以看到测试结果了，正确的则显示绿条和注解，错误的则显示红条以及错误信息：

QUnit 5分钟教程_第2张图片

比如我们这里故意放了一个错误，我们在测“恒等断言”时候，我们故意给了2个不等的json 对象，一个是{a:1}，一个是{a,50},所以，这里就“爆红”了。