webpack4.0各个击破(9)—— karma篇

栏目: JavaScript · 发布时间: 6年前

webpack 作为前端最火的构建工具,是前端自动化 工具最重要的部分 ,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过 问题 + 解决方式 的模式,以前端构建中遇到的具体需求为出发点,学习 webpack 工具中相应的处理办法。(本篇中的参数配置及使用方式均基于 webpack4.0版本

webpack4.0各个击破(9)—— karma篇

webpack4.0各个击破(9)—— karma篇

一. 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-reporterkarma-mocha-reporter 并进行基本的配置即可。

  • 代码覆盖率报告

    代码覆盖率报告的自动生成配置较为复杂,需要依赖前端代码覆盖率工具 istanbul 并结合若干插件才能实现。低版本的 webpack 可以参考 karma-webpack-example 这个开源项目的示例进行配置。 webpack4.0 以上版本可以参考下文推荐的示例。

    单元测试结果:

    webpack4.0各个击破(9)—— karma篇

    覆盖率报告:

webpack4.0各个击破(9)—— karma篇

四. 配置参考

笔者提供了针对 webpack4.0 + karma 的自动化测试配置示例,放在了 Webpack4-Karma-Mocha-Chai-Demo ,有需要的小伙伴可以自行查看,如果对你有帮助,不要忘记给个Star哦~


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

新经济,新规则

新经济,新规则

[美]Kevin Kelly / 刘仲涛 / 译言·东西文库/电子工业出版社 / 2014-7 / CNY 45.00

近年来,互联网持续震动着全世界各个行业以至于整个经济规则……在中国,以小米为代表的各类“互联网思维”轰轰烈烈地颠覆着各个行业……而这一切的一切,凯文凯利早就通过这本小书轻松写定。《新规则,新经济》一书介绍互联网时代,互联网影响下的经济运行的十个新游戏规则。一起来看看 《新经济,新规则》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试