如何给旧项目添加单元测试

如何给旧项目添加单元测试

如果你的项目是用vue-cli 2.x搭建的，且初始化项目的时候没有添加单元测试模块，后面需要手动引入，可按下面的方法添加。
1、在build目录下新建webpack.test.conf.js文件，内容如下：

'use strict';

const utils = require('./utils');
const webpack = require('webpack');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

const webpackConfig = merge(baseWebpackConfig, {
    externals: [],
    module: {
        rules: utils.styleLoaders()
    },
    devtool: '#inline-source-map',
    resolveLoader: {
        alias: {
            'scss-loader': 'sass-loader'
        }
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': '"testing"'
        })
    ]
});

// no need for app entry during tests
delete webpackConfig.entry;

module.exports = webpackConfig;

2、在项目根目录下新建test->unit文件夹,如下图所示：

其中specs文件夹中放我们写的测试用例，coverage放测试报告。
index.js文件的内容如下：

import Vue from 'vue';

Vue.config.productionTip = false;

// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec\.js$/);
testsContext.keys().forEach(testsContext);

// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.

const srcContext = require.context('../../src', true, /\.(vue|js)$/);

srcContext.keys().forEach(srcContext);

karma.conf.js文件的内容如下：

var webpackConfig = require('../../build/webpack.test.conf')

module.exports = function karmaConfig (config) {
  config.set({
    browsers: ['Chrome'],
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
    reporters: ['spec', 'coverage'],
    files: ['./index.js'],
    preprocessors: {
      './index.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }
  })
}

3、根目录下的.babelrc文件中添加以下内容，生成覆盖率。

  "env": {
        "test": {
          "plugins": [ "istanbul" ]
        }
      }  

4、package.json文件中的scripts中添加单元测试的启动命令

 "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"  

5、cnpm install 以下安装包：
@vue/test-utils
chai
karma
karma-chrome-launcher
karma-coverage
karma-mocha
karma-phantomjs-launcher
karma-phantomjs-shim
karma-sinon-chai
karma-sourcemap-loader
karma-spec-reporter
karma-webpack
mocha
sinon
sinon-chai
babel-plugin-istanbul
6、在项目根目录下执行npm run unit就可以看到测试用例的执行情况