共计 2183 个字符，预计需要花费 6 分钟才能阅读完成。
一. webpack 与自动化测试
webpack对应的关键词是模块化，它的次要工作就是打包和治理模块，所以首先须要明确的概念就是 webpack 之所以关联自动化测试，是因为 它可能为测试脚本提供模块治理的能力 ，实质上来讲，是将webpack 的打包性能嵌入了自动化测试框架，而不是将自动化测试框架作为插件集成进了webpack，了解这个区别是十分要害的。
对于 Karma+Mocha+Chai 及其他自动化测试相干工具的话题将在《大前端的自动化工厂》系列博文中讲述，本篇次要介绍 karma-webpack 连接件，它从工具实现层面上将自动化测试与自动化构建分割在了一起。
二. karma-webpack
插件地址：https://github.com/webpack-contrib/karma-webpack
2.1 自动化单元测试库简介
先对根本的单元测试工具做一个简要阐明：
Karma测试框架，提供多浏览器环境跑单元测试的能力，包含headless浏览器。Mocha测试框架，提供兼容浏览器和 Node 环境的单元测试能力，可应用karma-mocha集成进Karma中。Chai断言库，反对 should,expect,assert 不同类型的断言测试函数，可应用karma-chai集成进Karma中。
大部分单元测试都是基于上述三个库联结应用而开展的。Karma-webpack次要提供的能力，是为 Karma 中加载的测试脚本提供模块化加载的能力。
2.2 根本应用
应用 yarn add karma-webpack -D 进行装置，karma.conf.js配置文件如下：
module.exports = (config) => {
config.set({
files: [
// 针对 test 目录下所有合乎命名标准的测试文件
{pattern: 'test/*_test.js', watched: false},
{pattern: 'test/**/*_test.js', watched: false}
],
preprocessors: {
// 为选定脚本指定前处理器，这里配置所有的测试脚本须要通过 webpack 解决
'test/*_test.js': ['webpack'],
'test/**/*_test.js': ['webpack']
},
webpack: {
// webpack 配置，针对测试脚本打包的 compilation 配置，与我的项目文件打包不相干
// 也能够引入独立的配置文件
},
webpackMiddleware: {
// 如果应用了 webpack-dev-server 则能够传入一些参数
stats: 'errors-only'
}
})
}
这种配置中 webpack 会将每一个命中的文件当做是一个entry，也就是说它只会解决部分的依赖治理，这样做的长处是能够针对局部测试脚本独自跑单元测试，但劣势也很显著，就是当测试脚本数量很大且须要默认跑所有的测试用例的场景下（例如自动化流水线上主动触发的 LLT 测试中）效率绝对较低。
2.3 默认跑齐全部测试用例的场景
针对下面的问题，webpak提供了另一种可选的解决测试脚本集的办法，很容易设想，其实就是本人新建一个 entryPoint, 将要跑的测试脚本全副引入，打包成一个bundle.js 文件，它的劣势和劣势和根本场景正好是相同的。
这种场景下，karma.conf.js的配置只须要针对入口文件即可：
files: [
// only specify one entry point
// and require all tests in there
'test/index_test.js'
],
preprocessors: {
// add webpack as preprocessor
'test/index_test.js': ['webpack']
},
而后在测试文件的根目录下新建一个入口脚本index_test.js:
// 这个配置针对的是 test/**/?_test.js 格局的脚本文件
const testsContext = require.context(".", true, /_test$/)；testsContext.keys().forEach(testsContext)
三. 测试报告
个别跑完单元测试，都须要输入一份指定格局的报告，用于过后自查或问题追溯，此处须要留神的是当与 webpack4.0 联合应用时，karma的一些默认行为会生效（例如在控制台输入单元测试用例和后果汇总，以及 karma 独立运行时用来生成代码覆盖率报告插件 karma-coverage 也无奈失常工作），在此均须要重新配置。
- 单元测试报告
单元测试信息无奈输入的问题，能够显式援用插件
karma-spec-reporter或karma-mocha-reporter并进行根本的配置即可。 - 代码覆盖率报告
代码覆盖率报告的主动生成配置较为简单，须要依赖前端代码覆盖率工具
istanbul并联合若干插件能力实现。低版本的webpack能够参考 karma-webpack-example 这个开源我的项目的示例进行配置。webpack4.0以上版本能够参考下文举荐的示例。单元测试后果：
覆盖率报告：
四. 配置参考
笔者提供了针对 webpack4.0 + karma 的自动化测试配置示例，放在了 Webpack4-Karma-Mocha-Chai-Demo，有须要的小伙伴能够自行查看。
