乐趣区

关于javascript:webpack40各个击破9-karma篇

jiezi

一. 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，有须要的小伙伴能够自行查看。

退出移动版