30分钟QUnit入门教程

最新推荐文章于 2023-01-03 17:14:32 发布

Bob-Happens

最新推荐文章于 2023-01-03 17:14:32 发布

阅读量7.6k

点赞数 3

分类专栏： javascript 文章标签： javascript jquery QUnit 教程 unittest

本文链接：https://blog.csdn.net/boycycyzero/article/details/43916727

版权

30分钟Qunit入门教程

15分钟让你了解Javascript单元测试框架QUnit，并能在程序中使用。

QUnit是什么

QUnit是一个强大，易用的JavaScript单元测试框架，由jQuery团队的成员所开发，并且用在jQuery，jQuery UI，jQuery Mobile等项目。

Hello World

学习QUnit还是从例子开始最好，首先我们需要一个跑单元测试的页面，这里命名为index-test.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.17.1.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="http://code.jquery.com/qunit/qunit-1.17.1.js"></script>
  <script src="tests.js"></script>
</body>
</html>

这里主要引入了两个文件，一个是QUnit的CSS文件，一个是提供断言等功能的JS文件。

这里另外引入了一个tests.js文件，我们的测试用例就写在这个文件里面。
tests.js:

QUnit.test( "hello test", function( assert ) {
   
  assert.ok( "hello world" == "hello world", "Test hello wordl" );
});

页面载入完毕，QUnit就会自动运行test()方法，第一个参数是被测试的单元的标题，第二个参数，就是实际的而是代码，这里的参数assert为QUnit的断言对象，其中提供了不少断言方法，这里使用了ok()方法，ok()方法接受两个参数，第一个是表明测试是否通过的bool值，第二个则是需要输出的信息。

我们在浏览器中运行index-test.html，就会看到测试结果：
QUnit
从上到下，可以看到有三个checkbox，这几个的作用，我们后面再说。然后看到浏览器的User-Agent信息。之后是总的测试信息，跑了几个断言，通过了几个，失败了几个。最后是详细信息。

假如我们稍微修改一下刚才的断言条件，改成!=

assert.ok( "hello world" ！= "hello world", "Test hello wordl" );

则会得到测试失败的信息：
QUnit
详细信息中有错误的行号，以及diff信息等。

更多断言

上面介绍了assert.ok()方法，QUnit还提供了一些别的断言方法，这里再介绍几个常用的。

equal(actual, expected [,message])
equal()断言用的是简单的==来比较实际值和期望值，相同则通过，否则失败。
修改一下tests.js：

QUnit.test( "hello test", function( assert ) {

最低0.47元/天解锁文章

Bob-Happens

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
30分钟QUnit入门教程

30分钟Qunit入门教程15分钟让你了解Javascript单元测试框架QUnit，并能在程序中使用。QUnit是什么QUnit是一个强大，易用的JavaScript单元测试框架，由jQuery团队的成员所开发，并且用在jQuery，jQuery UI，jQuery Mobile等项目。Hello World学习QUnit还是从例子开始最好，首先我们需要一个跑单元测试的页面，这里命名为index-
复制链接

扫一扫