前言
在前端开发流程中，自动化测试是非常重要的一环。而在自动化测试中，QUnit 是一款比较常用的测试框架。但是，当我们需要对 DOM 操作进行测试时，QUnit 的单元测试环境有所不足，这个时候就需要使用 qunit-in-browser 这个 npm 包。本文将详细介绍 qunit-in-browser 的使用方法及其指导意义。
安装 qunit-in-browser
在命令行中输入以下命令，即可安装 qunit-in-browser：
npm install qunit-in-browser --save-dev
之后，在 package.json 文件中，devDenpendencies 中会添加 "qunit-in-browser"。
使用 qunit-in-browser 进行测试
- 配置测试 HTML，即编写以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------- ---- ------------- ----- ---------------- ----------------------------------------------- ------- ------------------------------------------------------ ---- ------ ---------- -- --- ------- -------------------------- ---- -- ----- - ---------------- ---- --- ------- ------------------------------------------------------------------------------------------- ------- ------ ---- ----------------- ---- ------------------------- ------- -------
在测试 HTML 中，需要先载入 QUnit 框架及被测试的 JavaScript 文件，并配置 qunit-in-browser 为测试框架。其中，main.js 为被测试的 JavaScript 文件。
- 编写测试用例，即编写以下代码：
// 对 main.js 进行测试
QUnit.test('test1', function(assert) {
assert.ok(main.method1(), 'method1 should return true.');
});在测试用例中，需要先载入被测试的 JavaScript 文件，并编写测试逻辑。在上述代码中，我们对 main.js 中的 method1 进行测试，期望其返回 true。
- 运行测试
在命令行中，输入以下命令：
qunit-in-browser /path/to/test.html
如果测试全部通过，则返回 0。
指导意义
使用 QUnit，加上 DOM 操作部分的 qunit-in-browser，对于前端开发中的自动化测试来说，能够极大地提高工作效率。使用 qunit-in-browser 进行 DOM 操作时，需要注意以下几点：
- 在测试 HTML 中，需要先载入被测试的 JavaScript 文件及 qunit-in-browser；
- 在测试用例中，需要先载入被测试的 JavaScript 文件；
- 在测试用例中，需要针对被测试的 DOM 元素进行操作，并使用断言来判断测试是否通过。
示例代码
测试 HTML 代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------- ---- -------------
----- ---------------- -----------------------------------------------
------- ------------------------------------------------------
---- ------ ---------- -- ---
------- --------------------------
---- -- ----- - ---------------- ---- ---
------- -------------------------------------------------------------------------------------------
-------
------
---- -----------------
---- -------------------
-----------------
----
-------- ---- ------
-------- ---- ------
-------- ---- ------
-----
------
-------
-------被测试的 JavaScript 文件 main.js 代码
-- -------------------- ---- -------
--- ---- - -
-------- ---------- -
------ -----
--
-------- ---------- -
------ -------------------------------------------
--
-------- ---------- -
--- -- - -----------------------------------------------------------------------
--- ------ - ------------------------------
--- ---- - - -- --- - -------------- - - ---- ---- -
-- -------------------- --- ----- ---- --- -
------ -----
-
-
------ ------
-
--测试用例代码
-- -------------------- ---- ------- --------------------- ---------------- - ------------------------- -------- ------ ------ -------- --- --------------------- ---------------- - ---------------------------------- --- -------- ------ ------ ------ --- --------------------- ---------------- - ------------------------- -------- ------ ------ -------- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005680c81e8991b448e42c6