概述
在前端开发中，测试是一个非常重要的环节，而Mocha + Chai + Sinon是一个相当流行的前端测试框架组合。然而，当我们希望在使用webpack的情况下测试我们的代码时，我们会遇到一些困难。这时候，@noriaki/mocha-webpack就可以提供帮助，它可以让我们在webpack打包后进行测试。
安装
在使用@noriaki/mocha-webpack之前，需要先安装webpack、mocha和chai等基本工具。接下来，我们可以使用npm进行安装：
npm install --save-dev @noriaki/mocha-webpack
如何使用
使用@noriaki/mocha-webpack非常简单。假设我们有一个webpack配置文件webpack.config.js：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -
---- ----------------
--
------- -
--------- ------------
----- ----------------------- -------
-
--其中，我们的入口文件是src/index.js，输出文件为dist/app.js。
我们可以在package.json文件的scripts中添加一个脚本来运行测试：
"scripts": {
"test": "mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"
}在这个脚本中，我们指定了webpack配置文件为webpack.config.js，同时指定了测试文件的格式和路径，例如我们这里使用的是test/**/*.spec.js，表示测试文件都在test文件夹下，且文件名称以.spec.js结尾。
接下来，我们可以编写测试代码了。假设我们的测试文件为test/add.spec.js：
import assert from 'assert';
import add from '../src/add';
describe('add', () => {
it('should return 3 when 1 + 2', () => {
assert.equal(add(1, 2), 3);
});
});其中我们引入了断言库assert和我们要测试的代码add。在测试用例中，我们可以使用mocha提供的各种功能进行测试，例如描述、it、before、after等。
最后，我们就可以运行测试了：
npm test
支持的功能
@noriaki/mocha-webpack提供了很多方便的功能，例如：
配置项
我们可以在webpack配置文件中加入一些配置项，用来指定我们的测试环境和使用的工具库。例如：
-- -------------------- ---- -------
----- - ------------------ - - --------------------------------
----- ----------------- - -------------------------------
-------------- - -
------- -
------ -
-
----- --------
------- ---------------
-------- --------------
-
-
--
-------- -
--- ---------------------
--- -------------------
------ ------
--
-
--覆盖率
我们可以使用Istanbul等库来生成覆盖率报告，例如：
npm install -D nyc
"scripts": {
"test": "nyc --reporter=text --extension=.spec.js --all -- mocha-webpack --webpack-config webpack.config.test.js test/**/*.spec.js",
"test:html": "nyc --report-dir coverage/html --extension=.spec.js --all -- mocha-webpack --webpack-config webpack.config.test.js --require test/setup.js test/**/*.spec.js",
"report": "nyc report --report-dir=coverage --reporter=html"
}在这个脚本中，我们使用nyc来生成覆盖率报告，支持text和html格式，其中--all表示我们需要测试所有文件，--extension=.spec.js表示测试文件都是以.spec.js结尾。
快速重复运行
在使用webpack进行打包时，我们可能需要对打包进行调试等操作。但是每次打包需要消耗较多时间，这就非常耗时。为了解决这个问题，我们可以使用webpack-dev-middleware来实现即时重打，例如：
-- -------------------- ---- ------- ----- - ------------------- ------ - - ----------------- ----- ------- - ------------------- ----- ---------- - ---------------------------------- ----- ------ - ---------------------------- ----- -------- - ---------------- ----- --- - --- --------- ----- -- - ------------------------ ----- --- - ---------- ---------------------------- - --------- --------- ------------ ----- --- -- ----
其中，我们使用Express来作为服务器，使用memfs来实现虚拟文件系统来避免在磁盘上生成文件。
总结
使用@noriaki/mocha-webpack可以帮助我们解决使用webpack进行打包后的测试问题，并且支持很多方便的功能。在实际开发中，我们可以根据实际情况进行配置和使用，以达到更好的测试效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e244a52