前言
karma-webpack-extend 是前端开发中常用的 npm 包，它可以在使用 karma 进行单元测试时，让你更加便捷地使用 webpack 配置文件，支持配置多入口，多输出等方式，同时在测试中加入 webpack 的热更新功能和 sourceMap 可以让开发者更加高效地进行测试工作。
安装
通过 npm 安装 karma-webpack-extend
npm install karma-webpack-extend --save-dev
同时需要安装 webpack 和 webpack-dev-middleware 以支持热更新
npm install webpack webpack-dev-middleware --save-dev
使用
配置文件
在 karma.conf.js 的配置文件中引入并配置 karma-webpack-extend 插件，在 plugins 中添加以下代码：
plugins: [
require('karma-webpack'),
require('karma-webpack-extend'),
]在 webpack 配置文件中添加以下代码，支持多个入口（多个 js 文件），多个输出（多个 HTML 文件），热更新和 sourceMap
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ------------------
-------------- - -
----- --------------
------ -
------ -----------------
------ ----------------
--
------- -
----- ----------------------- --------
--------- -----------
--
-------- --------------------
---------- -
------------ ---------
---- -----
--
-------- -
--- -----------------------------
--- ------------------------------------
-
-测试用例
在测试用例中引入需要测试的 js 文件，然后使用自带的 webpackPreprocessor 插件，对测试用例进行编译和处理，使得测试用例支持 import 和 require 语法，可以将结果直接传入一个函数中进行测试。
-- -------------------- ---- -------
----- ---- - ---------------
----- ------------- - ------------------------------
-------------- - ---------------- -
------------
-- ---------- -- ---
----------- ----------
-- ---- -- ----- - -------- -- ---- -- --- -------
------ -
--------------
--
-------------- -
--------------- ----------- ----------------------
--
-- ------- --
-------- --------------
-- ------- ------
-------------------- -
----------- ----------------------- ----------------------
--
-- ---
--
-示例代码
-- -------------------- ---- -------
-- -------- --
-------- ------ -- -
------ - - -
-
------ ------- ---
-- -------- --
-------- --------------- --------- -
-- --------- --- ------- -- -------- --- --------- -
------ ------
- ---- -
------ ----------
-
-
------ ------- -----
-- ------------- --
------ --- ---- --------------
-------------- --- ---------- ---------- -
-------- --- -------- -------- ---------- -
----- ------ - ------ --
--------------------------
--
--
-- ------------- --
----- ----- - -----------------------
-------------- ----- ---------- ---------- -
-------- ----- -------- -------- ---------- -
----- ------ - -------------- ---------
-------------------------------
--
--总结
karma-webpack-extend 可以让我们在使用 karma 进行单元测试时，更加便捷地使用 webpack 配置文件，支持配置多入口，多输出等方式，同时在测试中加入 webpack 的热更新功能和 sourceMap 可以让开发者更加高效地进行测试工作。它让我们更加轻松地进行单元测试，而不需要手动编写一个个测试用例，从而提高了开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efc4c49986ca68d89e7