JS单元测试工具Qunit

最新推荐文章于 2025-09-10 18:00:18 发布

转载最新推荐文章于 2025-09-10 18:00:18 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qianduanzu/archive/2012/05/05/2484507.html

文章标签：

#测试 #前端 #git #ViewUI

随着HTML5的发展和客户端脚本引擎的强大，前端代码变得日益复杂。本文介绍了一款前端单元测试工具——QUnit，包括其历史背景、使用方法及简单示例。QUnit最初作为jQuery项目的一部分，现已独立发展。

随着html5的普及和客户端脚本引擎的强大，之前由后端进行的页面渲染和部分业务逻辑逐渐移至到前端，照成前端逻辑和代码迅速复杂化。如果没有一款合适的单元测试工具保证前端单元模块的正确功能，对后期的代码调试和维护会造成很大的麻烦，今天就介绍一款单元测试框架 — Qunit

Qunit刚开始属于jQuery项目，专门用于测试jQuery单元模块。现在已经从jQuery项目中独立出来，你可以在https://github.com/jquery/qunit下载到最新版的Qunit，解压后里面有很多目录，对我们有用的其实只有qunit目录下的qunit.js和qunit.css。

下面来个简单的示例：
新建一个html文档，贴入以下代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <!-- 这里引用的是jQuery官网上的Qunit，项目中为了加快下载可以放到本地 -->
 5         <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css"/>
 6         <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
 7     </head>
 8     <body>
 9         <h1 id="qunit-header">QUnit example</h1>
10 
11         <h2 id="qunit-banner"></h2>
12 
13         <div id="qunit-testrunner-toolbar"></div>
14         <h2 id="qunit-userAgent"></h2>
15         <ol id="qunit-tests"></ol>
16         <div id="qunit-fixture">test markup, will be hidden</div>
17         <script>
18             test("a basic test example", function () {
19                 ok(true, "this test is fine");
20                 var value = "hello";
21                 equal(value, "hello", "We expect value to be hello");
22             });
23 
24             module("Module A");
25 
26             test("first test within module", function () {
27                 ok(true, "all pass");
28             });
29 
30             test("second test within module", function () {
31                 ok(true, "all pass");
32             });
33 
34             module("Module B");
35 
36             test("some other test", function () {
37                 expect(2);
38                 equal(true, false, "failing test");
39                 equal(true, true, "passing test");
40             });
41         </script>
42     </body>
43 </html>