在前端开发中，增量测试和自动化测试是非常重要的。Karma 是一个测试运行器，能够运行在真实的浏览器环境中进行测试。但是在 Karma 中，如何引入模块系统，比如 RequireJS 或者 CommonJS，并在浏览器中运行呢？这时候，就需要用到 karma-cajon。
karma-cajon 是什么？
karma-cajon 是一个 Karma 插件，它用于引入模块系统，并在浏览器中运行。
Karma 默认使用的是原生的 JavaScript，在浏览器环境中运行。但是，由于一些特殊的场景，比如使用模块加载器，需要采用不同的技术来完成。
karma-cajon 就是一种这样的插件，它可以让 Karma 支持使用模块加载器。
安装和配置
使用 karma-cajon，你需要在 Karma 配置中进行如下的配置：
-- -------------------- ---- -------
-------------- - ---------------- -
------------
--------------
----------- ----------- ---------
------ -
-- ---- -----
--
-- ---
------ -
-- ----- -------
--
-- ---
---
--其中，frameworks 中需要添加 cajon。
使用 cajon 引入模块
我们来看一个例子，假设我们需要引入一个使用了 RequireJS 的模块：
// app.js
define([], function () {
return {
sum: function (a, b) {
return a + b;
}
};
});通过使用 karma-cajon，我们可以在 Karma 引入这个模块，像这样：
-- -------------------- ---- -------
-- -----------
-- -- -----
--- ----- - -----------------
--- ----- - -----------------
--- ----- - -----------------
-- ------- ---- ------ ----- -----------
-------- ------------- -
--- --- - -----
---------------------- -------------- -
--- - -----
-------
---
---------- --- ------- ----------- ---------- -
----------------- ---------------
---
-
--------------在 cajon.require 中，我们可以通过传入依赖模块数组，来异步的加载模块。然后我们可以断言它是否可以正确运行，比如上面的测试：我们测试了 app.js 中的一个 sum 函数，测试其是否正确的将两个数字相加。
需要注意的是，由于 cajon 是异步的，所以在测试的函数前面加入了 done 参数，以便在 cajon 加载完成后结束测试。
匿名模块
在使用 RequireJS 时，可以自动匹配到文件名，但是在 cajon 中，如果用匿名的方式定义了一个模块，那么就需要在测试文件中，明确区分掉这个模块。代码如下：
-- -------------------- ---- -------
-- ----------------
--------------- -- -
------ -
---- -------- --- -- -
------ - - --
-
--
---
-- ---------------------
--- ----- - -----------------
-- ---
------------------- --------- --- ------ ----- ----------------------
-------- -------- ------ -
--- - -----
---在这种情况下，我们需要将匿名模块的名称显式指定为 app，然后在测试文件中，通过 cajon.require 来加载模块，并将模块与之前的脚本关联。
这个方法可以处理大多数情况下的问题，但是由于在测试文件中，模块的顺序是不确定的，所以我们需要注意将要测试的模块提前引入。
结论
karma-cajon 是一个很实用的工具，它可以方便的引入模块系统，并在浏览器中运行。如果你正在使用 Karma 进行单元测试，并且使用了一些模块加载器，可以考虑使用 karma-cajon 来优化测试过程，提高测试的可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eeeafe87a6cc516fbab6e1e