关于JavaScript测试工具:QUnit, Jasmine, MoCha
在进行前端开发过程中，在某些场景下，需要通过编写单元测试来提高代码质量。而JavaScript常用的单元测试框架有这几个：QUnit, Jasmine, MoCha.下面就基于这三个工具，简单做一比较：
1. QUnit
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 JavaScript
使用方法:
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!" ); });
断言方法:
- 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
基本用法:
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.
赠人玫瑰
手留余香
我们曾如此渴望命运的波澜，到最后才发现：人生最曼妙的风景，竟是内心的淡定与从容……我们曾如此期盼外界的认可，到最后才知道：世界是自己的，与他人毫无关系！-杨绛先生
如果，您希望更容易地发现我的新博客，不妨点击一下绿色通道的【关注我】。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？