单元测试Qunit

来源：互联网发布：gopro windows 编辑：程序博客网时间：2024/06/01 21:48

QUnit

QUnit是一个强大的JavaScript单元测试框架，该框架是由jQuery团队的成员所开发。据说一开始是jQuery的一部分，后来独立于jQuery，是jQuery的官方测试套件。官方说法，QUnit是个强大简单易用的JavaScript测试框架。由于QUnit 脱胎于 jQuery，因此应用非常广泛。

优点：
1.因为自带JS和CSS，因此它有最漂亮最详细的测试界面。
2.另外它的API和配置非常简单，很容易上手。
3.QUnit 脱胎于jQuery，不依赖任何软件和库。因此JS能运行的地方都可以使用它。与jQuery 集成更方便。
4.当然也有缺点，就是QUnit 主要用于浏览器中进行测试，自动化不是很好。不过随着它的流行，相信不是问题。

安装

QUnit 的安装很容易，下面三种方式都可以。
官网下载： http://qunitjs.com/ 最新版本是 v2.4.0。

直接引用

  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.4.0.css">  <script src="https://code.jquery.com/qunit/qunit-2.4.0.js"></script>

npm安装

npm install --save-dev qunitjs

另外官网上也给出了YARN 和 bower 的安装。

YARN: yarn add qunitjs --devBower bower install --save-dev qunit

方便起见，建议全局安装

npm install -g qunitjs

这样我们就可以在命令行即可执行测试:

qunit 'tests/*.js'

使用

例子

先看一个简单的例子:

<!DOCTYPE html><html>   <head>      <meta charset="utf-8">      <title>QUnit Example</title>      <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.4.0.css">     </head>   <body>      <div id="qunit"></div>      <div id="qunit-fixture"></div>      <script src="https://code.jquery.com/qunit/qunit-2.4.0.js"></script>      <script type="text/javascript">         QUnit.test( "hello test", function( assert ) {           assert.ok( 1 == "1", "Passed!" );         });         QUnit.module( "module a", function() {            QUnit.test( "a basic test example", function( assert ) {               assert.ok( true, "this test is fine" );            });         });         QUnit.todo( "fireLazer returns the correct value", function( assert ) {            var result = this.robot.fireLazer(); // Currently returns undefined            assert.equal( result, "I'm firing my lazer!" );            // assert.ok( true, "this test is fine" );         });         QUnit.test( "two async calls", function( assert ) {            assert.expect( 2 );            var done1 = assert.async();            setTimeout(function() {               assert.ok( true, "test resumed from async operation 2" );               done1();            }, 150);         });         QUnit.test( "ok test", function( assert ) {           assert.ok( true, "true succeeds" );           assert.ok( "non-empty", "non-empty string succeeds" );           assert.ok( false, "false fails" );           assert.ok( 0, "0 fails" );           assert.ok( NaN, "NaN fails" );           assert.ok( "", "empty string fails" );           assert.ok( null, "null fails" );           assert.ok( undefined, "undefined fails" );         });         QUnit.test( "step test", function( assert ) {           assert.expect( 1 );           var obj = {};           obj.hook = function() {             assert.step('Hook is called!');           };           obj.invokeHookIndirectly();         });      </script>   </body></html>

用浏览器打开如下：

例子中我们使用：

QUnit.test(name, testFunction)

第一个参数name是用来标记test名称的字符串。第二个参数，testFunction是一个函数，包含了一个asset作为它的参数。asset包含了许多可供我们断言的方法。

div

要注意的是，这里一定要在 <body> 元素里添加下面的 <div>元素。

<div id="qunit-fixture"></div>

用于展示自动化执行结果。

API

QUnit 的API有五部分：Main methods, Assertions, Config, Callbacks, Async control。相比于Mocha、Jasmine 来说，可以说算少。
首先 QUnit 使用 module 和 test 方法组织测试集和测试用例。

QUnit.module( name [, hooks] [, nested ] )// hooks properties: { before, beforeEach, afterEach, after }// Nested module: nested( hooks )QUnit.test( name, callback )

由于QUnit 是支持 TDD 的，因此少不了以下方法。

QUnit.only( name, callback ) // 本次只运行改测试用例，忽略其他。QUnit.skip( name )// 本测试用例可能还不 pass，跳过执行。QUnit.todo( name, callback ) // 该测试用例尚未完成，之后会加上。

另外，还有支持异步测试的 QUnit.stop() 和 QUnit.start()。

Assertions

首先是八个与 equal 有关的断言。

equal( actual, expected [, message ] ) //真实值和期待值（expected ）是否相等，通过非严格方式的 "=="，可能会转换类型。notEqual( actual, expected [, message ] )strictEqual( actual, expected [, message ] )// 真实值和期待值（expected ）是否相全等（===）。notStrictEqual( actual, expected [, message ] )deepEqual( actual, expected [, message ] )// 递归性严格比较的，针对所有的javascript类型。如果真实值和期待值（expected）属性，属性值都一样并且和有同样的prototype的话，断言通过。notDeepEqual( actual, expected [, message ] )propEqual( actual, expected [, message ] )//比较真实和期待（expected ）的对象的属性和属性值是否相同，相同断言通过。（注意和deepEqual的区别。）notPropEqual( actual, expected [, message ] )//在异步测试中告诉Qunit 测试完成。var done2 = assert.async()expect( amount ) // 预测我们的 assert 的执行次数，如果测试用例执行完发现不一致，则测试失败。ok( state [, message ] )notOk( state [, message ] )throws( blockFn, expected [, message ] )//判断函数是否抛出一个异常，第二个参数可选，代表不一定要检测抛出异常的类型timeout( duration ) // 单位 millisecondsstep( [ message ] )verifySteps( steps [, message ] )

调试工具

用浏览器打开后，页面的顶部会出现三个可用的小工具。很有用。

Hide passed tests
即隐藏通过的测试，很显然，开发时我们更关注失败的测试用例。

Check for Globals

如果勾选这个，在运行测试之前，QUnit会枚举window所有属性，然后与运行结束之后的window做比较，如果前后不一样，就会failed 掉。是不是很神奇？这样我们再也不会担心由于我们的失误污染全局变量了。

例如，我们在下面的代码中声明变量 zz 不用 var ，则会产生全局变量。

         QUnit.test( "step test", function( assert ) {           // 省略代码           var zw = {};           zz = {};           assert.ok( true, "test resumed" );         });

当勾上时，会显示这个测试用例失败。

No try-catch
我们知道JavaScript不擅长异常处理。QUnit使用try-catch 捕获异常，然后抛出的异常。此时原来的异常堆栈就丢失了。这就给错误定位带来不方便。而选中时，QUnit 就会在try-catch 之外执行回调，这时如果出现异常就停止。

阅读全文

0 0