使用karma进行javascript单元测试

安装karma及其插件

1. 安装karma库和karma命令接口

执行npm install -g karma-cli。
全局安装karma-cli方便执行karma start命令，否则你要输入./node_modules/karma/bin/karma start才可执行。
npm install karma --save-dev

2. 安装各种karma插件

执行npm install karma-jasmine karma-chrome-launcher jasmine-core karma-webpack karma-sourcemap-loader babel-loader babel-core babel-preset-es2015 --save-dev
其中，
karma-chrome-launcher用于启动chrome浏览器。
jasmine-core是一个测试框架。
karma-jasmine是可用于karma的jasmine。
karma-webpack就是可用于karma的webpack。
babel-loader babel-core babel-preset-es2015是各种babel插件。

配置karma.conf.js文件

执行karma init，会有如下对话

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> src/**/*.js
> test/**/*.js
11 11 2016 10:10:10.111:WARN [init]: There is no file matching this pattern.
>
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

生成karma.conf.js后，再进行如下配置

{
    //需修改的配置
    preprocessors: {
        'test/**/*.js': ['webpack'] 
    },
    webpack: {
        module: {
            loaders: [{
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015']
                }
            }]
        }
    },
}

待项目的test/index.js写好测试代码后，执行karma start便开始测试。

支持React组件测试(待验证)

执行npm install karma-sourcemap-loader babel-preset-airbnb react-addons-test-utils enzyme --save-dev安装依赖库。
改写配置文件

var path = require('path');

module.exports = function(config) {  
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      './tests/**/*.js'
    ],

    preprocessors: {
      'src/**/*.js': ['webpack', 'sourcemap'],
      'tests/**/*.test.js': ['webpack', 'sourcemap']
    },
    // webpack file
    webpack: { 
      devtool: 'inline-source-map', //just do inline source maps instead of the default
      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel',
            exclude: path.resolve(__dirname, 'node_modules'),
            query: {
              presets: ['airbnb']
            }
          },
          {
            test: /\.json$/,
            loader: 'json',
          },
        ]
      },
      externals: {
        'react/addons': true,
        'react/lib/ExecutionEnvironment': true,
        'react/lib/ReactContext': true
      }
    },

    webpackServer: {
      noInfo: true 
    },

    plugins: [
      'karma-webpack',
      'karma-jasmine',
      'karma-sourcemap-loader',
      'karma-chrome-launcher',
    ],


    babelPreprocessor: {
      options: {
        presets: ['airbnb']
      }
    },
    reporters: ['progress'],
    // port: 9002,
    logLevel: config.LOG_INFO,
    browsers: ['Chrome'],
    singleRun: false,
  })

};

import React from 'react';  
import { shallow, mount, render } from 'enzyme';  
import Footer from '../src/components/footer';

describe('Footer Component Tests', function () {  
  it('contains copyright words',function() {
    expect(shallow(
).contains(
All Rights Reserved By Vanthink-UED
)).toEqual(true);
  })
  it('contains four link',function() {
    expect(shallow(
).find('a').length).toBe(4);
  })
});

参考

http://www.jackpu.com/shi-yong-enzyme-ce-shi-ni-de-react-zu-jian/
https://zrysmt.github.io/2017/04/28/%E5%89%8D%E7%AB%AF%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7--%E4%BD%BF%E7%94%A8karma%E8%BF%9B%E8%A1%8Cjavascript%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/