1. QUnit

A JavaScript Unit Testing framework. QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code.

Features:
- Similar to server-side frameworks(JUnit, Nunit)
- Built by the jQuery team
- Used to test jQuery's features
- No dependencies
- Can test server-side JavaScript

Usage:

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

tests.js:
test( "hello test", function() {
　　ok( 1 == "1", "Passed!" );
});

Assertions:

- ok(state, message)
- equal(actual, expected, message)
- notEqual (actual, expected, message)
- deepEqual (actual, expected, message)
- notDeepEqual(actual, expected, message)
- strictEqual (actual, expected, message)
- notStrictEqual(actual, expected, message)
- raises (actual, expected, message)

2. Jasmine

asmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

Since describe and it blocks are functions, they can contain any executable code necessary to implement the test. JavaScript scoping rules apply, so variables declared in a describe are available to any it block inside the suite.

Features:
- Open Source Framework
- Behavior Driven Development framework
- Supports both client-side and server-side testing

Behavior Driven Development:
Write a failing acceptance test <--> Write a failing unit test <--> Write code to pass the test

Usage:
Using the default model SpecRunner.html which referenced jasmine.css, jasmine.js, and jasmine-html.js. Write your own spec as below:

MySpec.js
describe("MyClass", function() {

　　it("should be true", function() {
　　　　expect(true).toBeTruthy();
　　});

　　it("should be false", function() {
　　　　expect(true).toBeFalsy();
　　});
});

Built-in Matchers (not):
- expect(x).(not.)toEqual(y);
- expect(x).(not.)toBe(y);
- expect(x ).(not.)toMatch(pattern);
- expect(x ).(not.)toBeDefined();
- Expect(x).(not.)toBeUndefined();
- expect(x ).(not.)toBeNull();
- expect(x ).(not.)toBeTruthy();
- expect(x ).(not.)toBeFalsy();
- expect(x ).(not.)toContain(y);
- expect(x ).(not.)toBeLessThan(y);
- expect(x ).(not.)toBeGreaterThan(y);
- expect(function(){ fn ();}).(not.)toThrow(ex);

Creating Custom Matcher:

steps:
1. Typically created in a beforeEach
2. this.addMatchers ()

Example:
beforeEach(function() {
　　this.addMatchers ({
　　　　toBeFive: function() {
　　　　　　return this.actual === 5;
　　　　}
　　});
});

Skipping tests:

Add an “x” in front of the describe or the it function

3. Mocha

Mocha is a feature-rich JavaScript test framework running on node and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

Features:

- Open Source Framework
- Started in Node
- Supports both client-side and server-side testing
- Supports both BDD and TDD style tests
- Supports both command line and browser
- Supports any JavaScript assertion library (YUI Port, expect.js, should.js, jshould.js, assert.js, chai.js)
- Supports asynchronous testing
- Requires an assertion library

Usage:

html
<!DOCTYPE html>
<html>
　　<head>
　　　　<title>Mocha</title>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<link rel="stylesheet" href="mocha.css" />
　　</head>
　　<body>
　　　　<div id="mocha"></div>
　　　　<script src="mocha.js"></script>
　　　　<script src="chai.js"></script>
　　　　<script>mocha.setup('tdd')</script>
　　　　<script>expect = chai.expect;</script>
　　　　<script src="test.js"></script>
　　　　<script>
　　　　　　mocha.run();
　　　　</script>
　　</body>
</html>

(QUnit style)test.js
suite('my first suite');

beforeEach(function() {
　　console.log('setup');
});

afterEach(function() {
　　console.log('teardown');
});

before(function() {
　　console.log('before');
});

after(function() {
　　console.log('after');
});

test('test 1', function() {
　　expect(1).to.equal(1);
　　console.log('test');
});

(TDD style)test.js
suite('my first suite', function() {

setup(function() {
　　console.log('setup');
});

teardown(function() {
　　console.log('teardown');
});

before(function() {
　　console.log('before');
});

after(function() {
　　console.log('after');
});

test('test 1', function() {
　　expect(1).to.equal(1);
　　console.log('test');
});

});

(BDD style)test.js
describe('my first suite', function() {

　　beforeEach(function() {
　　　　console.log('setup');
　　});

　　afterEach(function() {
　　　　console.log('teardown');
　　});

　　before(function() {
　　　　console.log('before');
　　});

　　after(function() {
　　　　console.log('after');
　　});

　　it('should be my first test', function() {
　　　　expect(1).to.equal(1);
　　　　console.log('test');
　　});

　　describe('inner suite', function() {

　　　　it('should be my second test', function() {
　　　　　　expect(2).to.equal(2);
　　　　　　console.log('test 2');
　　　　});

　　});

});

Three different assertion syntaxes in Chai js
Assert: var assert = chai.assert;
Expect: var expect = chai.expect;
Should: var should = chai.should(); // notice should is a function

Writing & Running Mocha Tests

TDD and BDD style tests:
(see above usage part)

Filtering:
In the test url, add ?grep=keyword can filter tests.

View source code:
Click on the test, the source code should display.

Exclusive Tests:
Only display one test: it.only('...', function(){...})
Only display one block tests: describe.only('...', function(){...})

Skipping Tests:
Skip one test: it.skip('...', function(){...})
Skip one block test: describe.skip('...', function(){...})

Pending Test:
Only have the description no function: it('...');

Global Leaks:
Newer version does not have this problem.

Slow Test:
Debug source code in developer tool, set break point to one test, you will see the time of the test spent.

Asynchronous Tests with Mocha

it('should be something', function(done){
　　...
　　done();
})

Timeout:

The default timeout is 2 seconds for each test.
　　

mocha.setup({timeout:3000}); // set timeout for all tests

describe('Outer Describe', function() {
　　it('should be asynchronous', function(done) {
　　　　this.timeout(2500); // setup timeout only for this test
　　　　setTimeout(function() {
　　　　　　expect(1).to.equal(1);
　　　　　　done();
　　　　}, 2400);
　　})
});

Comparison

QUnit is very easy to get started with, as you only need to include two files(qunit.css and qunit.js) and a little bit of markup, then you can start writing tests. QUnit is TDD style tests.

Jasmine is easier to get started – it’s all-in-one package will generally get you and a team up and testing much faster, and you’ll be in good hands with it. Jasmine is BDD style tests.

Mocha is significantly more flexible, but you have to piece it together yourself. There is no spy framework built in to Mocha, so most people use sinon.js. There’s no assertion framework built in to Mocha either, so you’ll have to pick one. Chai is the popular one, but there are many, many others available. You can also configure Mocha for BDD (jasmine style) or TDD (QUnit style) easily. But you have to pick and choose how you want Mocha to work. This flexibility is great because you can build the test environment that you really want. But it means you have more work to do, more individual pieces to maintain /  keep up to date, etc.

JavaScript测试工具比较:　QUnit, Jasmine, and Mocha的更多相关文章

  1. 前端技术之：JavaScript测试工具

    Mocha 一个用于Node.js与浏览器端的简单.自由.有趣的JavaScript测试框架. https://mochajs.org/ https://github.com/mochajs/moch ...

  2. 关于JavaScript测试工具:QUnit, Jasmine, MoCha

    在进行前端开发过程中,在某些场景下,需要通过编写单元测试来提高代码质量.而JavaScript常用的单元测试框架有这几个:QUnit, Jasmine, MoCha.下面就基于这三个工具,简单做一比较 ...

  3. 测试工具使用-Qunit单元测试使用过程

    031302620 应课程要求写一篇单元测试工具的博客,但是暂时没用到java,所以不想使用junit(对各种类都不熟悉的也不好谈什么测试),原计划是要用phpunit,但是安装经历了三个小时,查阅各 ...

  4. JavaScript测试工具

    大家都知道Javascript的测试比较麻烦,一般是开发使用一些浏览器的插件比如IE develop bar或是firebug来调试,而测试往往需要通过页面展示后的js错误提示来定位.那么还有其他比较 ...

  5. Javascript单元测试框架比较Qunit VS Jasmine

    Javascript单元测试框架比较Qunit VS Jasmine 工欲行其事必先利其器,好的单元测试框架是TDD成功的一半.Javascript优秀的测试框架很多, 包括Jasmine,Qunit ...

  6. javascript测试框架mocha

    node测试框架mocha 简单.灵活.有趣,mocha是一个功能丰富的javascript测试框架,运行在node和浏览器中,使异步测试变得更加简单有趣.http://mochajs.org/ 安装 ...

  7. JavaScript开发工具大全

    译者按: 最全的JavaScript开发工具列表,总有一款适合你! 原文: THE ULTIMATE LIST OF JAVASCRIPT TOOLS 译者: Fundebug 为了保证可读性,本文采 ...

  8. WEB前端常用的测试工具

    一.QUnit 前端测试工具 QUnit是一个强大的JavaScript单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件.Qunit是Jquery的单元测试框架, ...

  9. modern.IE – Web 开发必备的 IE 浏览器测试工具

    modern.IE 是微软推出的一个开发人员中心,提供免费的工具和资源,旨在使您能够花更少的时间来测试各种版本的 Internet Explorer,并留出更多时间在现代 Web 上构建重要的内容.m ...

随机推荐

  1. startActivity跳转失败而且没有异常信息

    startActivity跳转不能显示目标activity的布局(显示空白页),而且没有异常信息 onCreate()方法重写错误 应该重写的是onCreate(Bundle savedInstanc ...

  2. 行内js函数调用

    <ul> <li onclick=abc(this);><a href="javascript:void(0);">12234588</a ...

  3. HTML5 十大新特性(九)——Web Storage

    H5的webStorage技术一共提供了两个对象:window.sessionStorage和window.localStorage. 一.window.sessionStorage--会话级存储 存 ...

  4. MR21、MR22和CK24的区别

      MR21和CK24都是用于修改物料标准价,但两者功能和用法上有所区别:MR21是直接更改单价, CK24是在CK11N或CK40N价格评估的基础上的价格核发, CK24记录价格评估, 价格评估在做 ...

  5. springmvc的foward和redirect跳转简单解析

    Spring MVC 中,我们在返回逻辑视图时,框架会通过 viewResolver 来解析得到具体的 View,然后向浏览器渲染.假设逻辑视图名为 hello,通过配置,我们 配置某个 ViewRe ...

  6. wireshark常用命令

    Wireshark 基本语法,基本使用方法,及包过虑规则: 1.过滤IP,如来源IP或者目标IP等于某个IP   例子: ip.src eq 192.168.1.107 or ip.dst eq 19 ...

  7. python的字符串内建函数

    http://www.ziqiangxuetang.com/python/python-strings.html

  8. ios中属性和对象的初始化

    属性和对象的初始化为了方便记忆, 我们可以都使用self.来初始化. 这样可以避免内存的过度释放.

  9. PHP多条件搜索ShopNc实例

    控制器部分代码: if (trim($_GET['keyword']) != '') { //echo $_GET['search_type']; exit(); switch ($_GET['sea ...

  10. ElasticSearch集群配置

    因机器有限,本文只做单机3个节点的集群测试. 1.集群测试信息 elasticsearch版本:elasticsearch-2.4.1 windowns版本:win10 2.解压elasticsear ...