搭建 基于 Mocha + Webpack2 + Chai + ES6 前端单元测试

现在如果写某些类库的话，非常注重单元测试，从而确保发版质量。大概测试框架也有很多，这里介绍比较常用的 前端测试框架技术选型。

安装 Karma

npm install -g karma-cli

然后使用 karma 初始化配置:

karma init

如果提醒，安装依赖，你只需输入:

npm install karma --save-dev

然后再执行一次就好，系统会提醒你进行一些输入操作，你可以直接跳过。这个时候程序会自动创建 karma.conf.js 。

基本内容是：

// Karma configuration
// Generated on Wed Jul 12 2017 18:29:58 GMT+0800 (CST)

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

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


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


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


    // 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_INFO,


    // 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
  })
}

其中 files 是指定测试的文件规则，比如 test/**/*.test.js表示运行 test 目录下所有 带有 test.js 后缀的文件。

framework 则表示需要引用的框架，比如 jasmine 或者 mocha。

preprocessors 表示 在浏览器进行测试前你需要对文件的一些预处理。

我们后边会贴出完整的 karma.conf.js .

安装webpack 和 babel

npm install webpack babel-polyfill babel-preset-stage-2 babel-plugin-transform-runtime babel-loader babel-core babel-preset-env babel-istanbul --save-dev

编辑 .babelrc 确保我们的源码可以被编译成正确的浏览器支持的 ES5的代码

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

这个时候我们还需要安装 karam 相关的插件

npm install karma-webpack karma-sourcemap-loader --save-dev

安装 mocha 和 chai

这个时候我们需要安装 mocha ，mocha 是一款功能丰富的javascript单元测试框架，它既可以运行在nodejs环境中，也可以运行在浏览器环境中。

npm install mocha --save-dev

除了安装 mocha 外我们还需要安装 karma-mocha 插件

npm install karma-mocha --save-dev

除了 mocha 外，我们需要安装 chai。
chai是一套TDD(测试驱动开发)/BDD(行为驱动开发)的断言框架。

expect(foo).to.not.equal('bar');  
expect(goodFn).to.not.throw(Error);  
expect({ foo: 'baz' }).to.have.property('foo')  
  .and.not.equal('bar');

具体的断言使用可以看这里

npm install chai karma-chai --save-dev

除此之外，我们还需要确定我们测试的浏览器比如 Chrome 或者 PhantomJS等。

npm install karma-chrome-launcher --save-dev

这个时候我们的karma 配置文件 karma.conf.js 的内容应该修改为

const webpack = require("webpack");
const path = require('path');

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

        files: [
            '../node_modules/babel-polyfill/dist/polyfill.min.js',
            './test/**/*.test.js'
        ],

        exclude: ['**/node_modules/**/*.test.js'],

        frameworks: ['mocha', 'chai'],

        logLevel: config.LOG_INFO, //config.LOG_DISABLE, // config.LOG_INFO
        singleRun: true,

        preprocessors: {
            './test/**/*.test.js': ['webpack']
        },

        // reporters: ['mocha'],

        webpack: {
            module: {
                // devtool: 'inline-source-map',
                loaders: [

                    {
                        test: /\.js$/,
                        loader: 'babel-loader',
                        exclude: /(node_modules|bower_components)/,
                    },
                ]
            }
        },
        webpackServer: {
            noInfo: true
        },

        plugins: [
            "karma-webpack",
            "karma-mocha",
            "karma-chai",
            "karma-chrome-launcher",
            "karma-sourcemap-loader"
        ],
        browsers: ['Chrome'], // ['Chrome']
        concurrency: Infinity
    });
};

接下来我们修改 package.json 里的 scripts 脚本的 内容

 "test": "karma start test/karma.conf.js",

这个时候输入 npm run test 就能查看正确的测试了。

如果你需要引入 DOM 的操作，你需要安装 mocha-jsdom，这样你可以实现对 DOM 节点的操作和判断。

Demo Source

扩展阅读

http://www.bradoncode.com/blog/2015/02/27/karma-tutorial/

https://x-team.com/blog/setting-up-javascript-testing-tools-for-es6/