在前端开发中，测试是不可或缺的一环。而在测试框架中，QUnit 是最为受欢迎的之一。但是，QUnit 自带的覆盖率报告功能比较简单，无法满足大型项目的需要。因此，我们需要借助 @juliankniephoff/grunt-blanket-qunit 这个 npm 包来生成更为详细的测试覆盖率报告。
安装
我们需要在项目中下载 @juliankniephoff/grunt-blanket-qunit，可以通过以下命令进行安装：
--- ------- ------------------------------------ ----------
配置
首先，需要添加配置文件 gruntfile.js，并添加以下代码：
------------------
-------------- -
-------- - -- ----
----- ------------------------------------------ -- ----- ---
---------- --- -- ------
---------------- ----
------- ------
--------- ---
----------- ---
---- -----
---------- -----
---------------- ---
-------------- ------
------- ------------
-------------- ---
----- -
--------- -
------------------------------ ----
-
-
-
-
---其中，options 可以设置许多参数，如 urls（待测试文件 URL）、threshold（覆盖率百分比）等等。这里我们需要将 urls 配置为待测试文件的 URL，threshold 配置为我们期望达到的覆盖率百分比。
接下来，需要在 gruntfile.js 中添加以下代码，完成 grunt-blanket-qunit 与 QUnit 的集成：
------------------
-------------- -
-------- - --- --
---- -
-------- -
----- --------------------------------------------- -- -------- - ---------------
---------- ---
-------- -----
-
-
-
---
---------------------------------------- -------- -- -
----- ------ - -
------- -
- - --- -------- -- ---- ----------- ----- -
- - --- --------------- ----- -
- - --- ------------ ----- -
- ---- -
- - --------- --- --- ---------------------------- -- --- ---------- ----- -
- - -------- ----- --- --- ----------- -- ---------- -
- ---- -
- - -------- ---------------------------------- -- --- -
- - ------ -------- ---------- --- ------- -- ---- ---------- -
- -------
--
----- ---- - -------------
----- ---- - -----
----- -------- - ------------------------------------------
----- ---------- - ---------------
----- ------- - ------------ --------- ------------
----- -------- - -------- ----- -------- -
------------------------------ -------- -------- --------- -
----- -------- - ------- - - - --
---------------- --- ---
---
--
--- --------------- - --
--- --------------- - --
--- ------------- - --
------------------------------- -----
--------------------------- ------- -
----- ---- - ------------------------------------------------- ------ -
------ ------------------------
---
--------------- -- ------------
--------------------- ----- -
-------------------------- - - -----
------------- -------- --------- -
-- --------- -
--------------- -- --
- ---- -
------------- -- --
-
--------------- -- --
-- ---------------- --- -- -
-- ---------------- - -- -
---------------------------- - - ---- ----------
-
-- -------------- - -- -
----------------------------- - - ---- ----------
-
-------
-
---
---
---
---执行
配置完成后，即可执行以下命令来运行测试：
----- -------------
测试完成后，即可在控制台中看到测试覆盖率的相关信息。同时，在项目的 cover/ 目录下，也可以找到测试的覆盖率报告。
示例代码
以下是一个简单的示例代码，以帮助读者更好地了解 @juliankniephoff/grunt-blanket-qunit 的使用方法：
--------- -----
------
------
----- ----------------
------------ ---------------
----- ---------------- --------------------
-------
------
--- ----------------------- ------------
--- -----------------------
---- ------------------------------------
--- --------------------------
--- -----------------
----
-- ------------------------------ ---- ----------- -- --------- ------------
-----
--- ---------------
-- -------------- ------
-----
-----
------- ---------------------------
------- ----------------------------
--------
-------------------- -------- -------- -
----- ---- - ------------- ----
----------------------
----------
----------------- --- --------- -- ----
----- -- -----
--
---
---------
-------
--------------------- - -
--------- -------- ----- -------- ----- -
----- ------ - ------------------------------------- -- ---------------
----- -------- - ----------------- - --------------------------- - -------
----- ------- - --------------- -- -----
----- ------------- - ----------------------
----- -------------- - ---------------
--------------- ------- ---------------- --------------
--
----- ------ - ---------------------- ----------------
----- ---- - ----------------------------
----- -------- - ------------ --------------------- -- ----
-- ---------------- -
-------------------------------------- - -----
--------------------------- - ------
-
------------- - ---------
----------------- - -
------- ----
------ ---
--
----- ---------------- - ------------- -- -
--------------------- ---------- -----
-------------
-- ---------------
------------
-- ---------
--------------------- - -------- ----- -
------------------------ -----
--
-------------------- - -------- --------------- -
------------------- -------- ---- ---------------------------
--
------------ - -------- ----- ------ -
--------------- -------- ---- -----
-- ----------------- -- ------------ - -- -
---------------------------------
----------------- -- -
----------------------- ------- ---- --------
---
---------------------------------
-
--
-------------- ----- ----- -------------- -------- -- -
-------------------------------
-- ------- --- ---------- -
--- -
----- ------- - --------------------- -
---- ----
--------------- ---------------
-------- -------
---
--------------
- ----- --- -
-----------------
----- --
-
- ---- -
--------------- ---- -------- ---- --------
------------
-
---
--
---------- -------- -------- -------- -
----- ------------------- - -
-------------------------------- - -------- --------- ---- -
---- --- - --------------- -
---- -------------- - -------------------------- -
---- ----------- - ----------------------- -
----------------------- - - --- - ---------- -
---- ------- - --------- -
---- ------- - --------- -
------------------ ------------------- -
---- ------ - -------------- ---- -
------- ----------------------------- -
------ -
---- ---------- - --- ------------ -
-------- --------- -
------- -
--- ------------- ---- -
---- ----- - --- ------------------------------ -
-- ---- ---- -
---- ----- - ---------------- -
----
--------- --------------------- ---- -
- --- ---- - - -- - - ------------------------- ---- ---- -
- -- ---------------------------- --- ------ ---- -
- ------- - -------- -
- ---- -
- ---- -
- ---
----------------------------- -
---- ---- -
-------------------- -- ---- -
-------------------- - - -------- -
-------- - ------------ -
----------------------------------- -
------- -
----------- -- ---- -
------------------ -
------- -
--- ---------------- ---- -
-------------------- -- ---- -
--------------------- -
--- --------- -
----- -
-- ----- --- ---- -
--------------------- - - ---- ------ -
----------------------------------- -
----- -
------- ----------- -
----
--
----- ---------------- - ---------------
------ -------- -
---- ------------
------ -
------------------- -
---- ------- - - - ---------------- - ----- -
------- -----------------------------------
--
---- -----------
------ -
------------------- -
--------- ----------------------- ---- -
- --- ---- - ----------------------- -
- --- ---- --- -- ----- ---- -
- -- ------------------------------- ---- -
- ------------ -
- ---- -
- --------- - ---- - ------------- -
- ------ ------------- -
- ---- -
- ------ -------- -
----- -
---- ------- - ---------------- - ---------------- - ------ -
------- -----------------------------------
--
--------
----- --- -------------- ---------
-
-
--结束语
有了 @juliankniephoff/grunt-blanket-qunit 这个 npm 包，我们可以更加轻松地生成测试覆盖率报告。希望本文对大家有所启示。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005594481e8991b448d6ad6