前言
在前端开发过程中，我们常常需要使用到前端自动化测试工具 karma。它可以方便地自动执行我们编写的测试用例，以确保代码质量。在使用 karma 进行单元测试时，我们可能会遇到需要编写模板的情况。但是，由于浏览器无法解析 .jade（或 Pug）文件，我们需要将 .jade 文件转换为 AngularJS 模块，然后在测试过程中直接使用这个 AngularJS 模块。这时候，我们就可以使用 npm 包 karma-ng-jade2module-preprocessor。
简介
karma-ng-jade2module-preprocessor 是一个 karma 插件，它可以将 .jade 文件转换成 AngularJS 模块。然后，我们可以在测试过程中直接使用这个模块，方便地进行测试。
安装
我们可以通过 npm 来安装 karma-ng-jade2module-preprocessor。在命令行中执行以下命令即可：
npm install karma-ng-jade2module-preprocessor --save-dev
配置
修改 karma 配置文件 karma.conf.js，让 karma 知道我们要使用 karma-ng-jade2module-preprocessor。具体如下：
-- -------------------- ---- -------
-------------- - ---------------- -
------------
-- ---------- -- ---
----------- ------------
-- ----- -- ----
------ -
------------
---------
--
-- -------------
-------------- -
--------- ----------------
--
-- --------------------------------- -------------
------------------------ -
-- ------- ----
--
-- ---
---
--注意：在 preprocessors 中的文件路径相对于 karma.conf.js 文件的路径。
在 karma-ng-jade2module-preprocessor 中，我们可以通过以下配置选项来自定义转换过程：
modulePrefix：生成的 AngularJS 模块前缀，默认为angular.module('templates')。stripPrefix：从 .jade 文件路径中去掉的前缀，默认为''。cacheKeyPrefix：AngularJS 模块缓存键前缀，默认为'jade:'。webpack：装载器选项对象，适用于 Webpack 等项目。
-- -------------------- ---- -------
------------------------ -
-- ------- ----
------------- ------------------------------------
------------ ---------
--------------- --------
-------- -
-- ------- ----
--
--示例
下面是一个简单的测试用例，我们将其存储在 test/example.spec.js 文件中：
-- -------------------- ---- -------
------------------- ---------- -
--------------------------------------
---------- ------ ---------- ---------- -
------------------------- ----------- -
--- ------- - ---------------------------------------------
---------------------
-------------------------------------- ---------
---
---
---同时，我们还需要一个名为 example.jade 的 .jade 模板文件：
div Hello, World!
在 karma.conf.js 中的 preprocessors 配置中，我们添加了以下一行代码：
'*.jade': ['jade2module'],
表示将 .jade 文件转换为 AngularJS 模块。
最后，我们可以运行 karma，测试我们的测试用例了。如果配置没有问题，你应该能看到测试通过的消息。
总结
在进行 AngularJS 单元测试时，我们经常需要使用到 .jade（或 Pug）等模板文件。但是，由于浏览器无法直接解析 .jade 文件，我们需要在测试前将它们转换为 AngularJS 模板。karma-ng-jade2module-preprocessor 可以帮助我们完成这个工作，从而方便地进行 AngularJS 单元测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b5681e8991b448e54dc