JS 项目中怎么集成 QUnit 框架进行单元测试-js教程-PHP中文网

qunit 是轻量易用的 javascript 单元测试框架，适用于浏览器端库测试；通过引入 css、js、源码、测试脚本及两个 dom 容器即可运行，支持模块分组、生命周期钩子和多种断言方法。

js 项目中怎么集成 qunit 框架进行单元测试

QUnit 是轻量、易上手的 JavaScript 单元测试框架，特别适合浏览器端库（如 js-cookie）的测试。集成它不需复杂构建流程，核心是 HTML 入口 + 依赖引入 + 测试组织。

准备 QUnit 运行环境

在项目中新建一个测试 HTML 文件（例如 test/index.html），按顺序引入以下内容：

<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.20.0.css">（样式文件，用于渲染测试界面）
<script src="https://code.jquery.com/qunit/qunit-2.20.0.js"></script>（核心测试引擎）
被测源码（如 <script src="../src/cookies.js"></script>）
测试脚本（如 <script src="./tests.js"></script>）
两个必需的 DOM 容器：<div id="qunit"></div> 和 <div id="qunit-fixture"></div>

编写可执行的测试用例

在 tests.js 中使用 QUnit.test() 定义测试单元，每个测试应聚焦单一行为。例如验证 cookie 写入与读取：

QUnit.test('get() returns value after set()', function(assert) {
  Cookies.set('test', 'ok');
  assert.strictEqual(Cookies.get('test'), 'ok', 'value matches');
});

常用断言方法包括：

assert.ok(condition, msg)：判断布尔值为真
assert.equal(actual, expected, msg)：宽松相等（==）
assert.strictEqual(actual, expected, msg)：严格相等（===）
assert.deepEqual(actual, expected, msg)：深度比较对象/数组

若测试含多个断言，建议用 assert.expect(n) 显式声明数量，避免漏执行导致误判通过。

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

组织测试结构与生命周期

用 QUnit.module() 对测试分组，便于归类和复用前置/后置逻辑：

QUnit.module('Cookie expiration', {
  beforeEach: function() {
    document.cookie = ''; // 清空已有 cookie
  }
});

QUnit.test('expires in 1 day', function(assert) {
  Cookies.set('tmp', 'x', { expires: 1 });
  assert.ok(document.cookie.includes('tmp=x'), 'cookie is set');
});

支持 beforeEach 和 afterEach 钩子，适合清理 DOM、重置状态等操作。