搭建karma+mocha+chai+webpack的支持es6的单元测试

问题背景
首先，在搭建之前要知道在什么情况下需要karma+mocha+chai+webpack的单元测试呢？
首先你写的项目是一个前端项目，是运行在浏览器中的，写好的代码包含了es6的语法，则需要搭建这样一个单元测试环境。

---

mocha是真正的测试框架，chai是断言库，而karma是一个调用浏览器执行测试代码的集合工具
需要的依赖有

• karma
• karma-chai
• karma-mocha
• karma-webpack
• webpack
• babel-loader
• babel-core
• mocha
• chai
• karma-chrome-launcher（用来自动启动Chrome浏览器,如果karma配置中是别的浏览器，则更换相应的launcher）

提示：可以通过命令

npm install --save--dev 以上插件名称

全部安装到位

在根目录下添加karma的配置文件
karma.conf.js

// file : karma.conf.js
// Karma configuration
// Generated on Wed Aug 15 2018 12:25:52 GMT+0800 (中国标准时间)

module.exports = function (config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: "",

    client: {
      captureConsole: true // 设置由 terminal 捕捉 browser 的输出
    },

    browserConsoleLogOptions: {
      level: "log",
      format: "%b %T: %m",
      terminal: true
    },

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ["mocha", "chai"],


    // list of files / patterns to load in the browser
    files: [
      "./test/**/*.js"  // test文件夹下任意层级的.js文件 将要被测试
    ],


    // list of files / patterns to exclude
    exclude: [
      "karma.conf.js"
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      "src/**/*.js": ["webpack"],
      "test/**/*.test.js": ["webpack"]
    },
    // karma 插件
    plugins: [
      "karma-webpack",
      "karma-mocha",
      "karma-chrome-launcher",
      "karma-chai"
    ],

    webpack: {
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
              {
                loader: 'babel-loader'
              },
            ]
          },
        ]
      }
    },

    // test results reporter to use
    // possible values: "dots", "progress"
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ["dots"],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_LOG,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ["Chrome"],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

之后在项目根目录下添加
.babelrc 文件

{
    "presets": [
        "es2015"
    ],
    "plugins": []
}

这个文件是对babel的配置

之后就可以在test文件夹下写测试文件了
测试文件怎么写？看看这篇教程,可以忽略它的安装配置过程，直接看测试文件的写法

写完测试文件后需要运行
在package.json中的scripts中添加

"scripts": {
    "test": "karma start karma.conf.js"
},

然后在命令行里执行

npm run test

就会执行测试，如果配置成功，而且自己的电脑中安装了Chrome的话，就会自动的打开Chrome浏览器，并且展示测试结果了。

---

补充：
配置中踩过的坑
在我按照别的博客中的webpack配置：

webpack: {
      module: {
        loaders: [{
          test: /\.js$/,
          loader: 'babel',
          exclude: /node_modules/,
          query: {
            presets: ['es2015']
          }
        }]
      }
    }

运行时
报出如下错误：

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties
are valid:

显然是配置语法中不支持loaders:这样的参数，需要用rules规定匹配规则。正确配置详见上面karma.conf.js中的配置