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

淡淡的烟草味﹌ 2022-01-05 08:29 425阅读 0赞

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

如果你的项目是用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文件夹,如下图所示：  
![在这里插入图片描述][20190623160122419.png]  
其中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就可以看到测试用例的执行情况

[20190623160122419.png]: /images/20211229/cf517d386e7f4cfea1e5b53946e49281.png