Webpack4-Karma-Mocha-Chai-Demo

1.项目说明

基于webpack4.0版本的自动化测试套件配置示例（2018年8月全新，亲测有效） 代码覆盖率报告： 单元测试结果：

2.demo使用方法

• 1.下载本仓库，在根目录下输入yarn安装依赖；
• 2.在根目录下输入yarn run karma启动Karma

3.相关框架及插件说明

• webpack 项目打包
• babel ES2015+语法转换
• karma 支持在不同浏览器中运行的测试驱动框架
• karma-chrome-launcher karma-**-launcher均为对应浏览器的加载插件
• karma-coverage-instanbul-reporter 覆盖率报告生成插件
• karma-mocha-reporter 单元测试报告生成插件
• mocha 单元测试框架
• chai 支持assert,expect,should不同语法风格的断言库
• istanbul js编写代码覆盖率检测工具
• istanbul-instrumenter-loader 业务逻辑代码loader（用于区分测试代码）

4.相关文档

• Karma官网已废，新版需要从github进

  • https://karma-runner.github.io/2.0/index.html

• webpack4.0如何集成karma

  • https://www.webpackjs.com/guides/integrations/

• 使用istanbul-instrumenter-loader处理业务逻辑代码

  • https://www.webpackjs.com/loaders/istanbul-instrumenter-loader/

• 使用karma-coverage-istanbul-reporter生成代码覆盖率报告

  • https://github.com/mattlewis92/karma-coverage-istanbul-reporter

5.鸣谢

本篇中业务逻辑部分代码来自karma-webpack-example项目（该项目中配置仍然有效，使用的是webpack低版本API）。