關於JavaScript測試工具:QUnit, Jasmine, MoCha

時間 2019-11-21

標籤關於 javascript 測試工具 qunit jasmine mocha 欄目 JavaScript 简体版

原文原文鏈接

在進行前端開發過程當中，在某些場景下，須要經過編寫單元測試來提升代碼質量。而JavaScript經常使用的單元測試框架有這幾個：QUnit, Jasmine, MoCha.下面就基於這三個工具，簡單作一比較：css

1. QUnithtml

QUnit是一個JavaScript單元測試框架. 它是個強大，容易使用和上手的JavaScript單元測試框架.它被用於進行 jQuery, jQuery UI and jQuery 移動工程的測試，以及其餘通用的JavaScript代碼測試.前端

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 JavaScriptnode

使用方法:app

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!" );
});

斷言方法:async

- 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)ide

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

基本用法:
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.

QUnit 是很是容易上手，你僅僅須要包含兩個文件（qunit.css and qunit.js）和一些不多的標記，而後就能夠開始編寫測試了。QUnit是一種TDD風格的測試;

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.

jasmine 是很容易開始---它是 all-in-one package ，能夠讓你和一個組測試起來很快速，而且你能夠很快的上手，Jasmine是一種BDD風格的測試；

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.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。