时间戳

首页 > 技术文章 > vue-cli脚手架build目录中的karma.conf.js配置文件

vue-cli脚手架build目录中的karma.conf.js配置文件

ye-hcj 2017-06-30 13:20 原文

本文系统讲解vue-cli脚手架build目录中的karma.conf.js配置文件

  1. 这个配置文件是命令 npm run unit 的入口配置文件，主要用于单元测试
    • 这条命令的内容如下 "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"
    这条命令中的 cross-env 是跨平台设置环境变量，你在命令行中设置环境变量加上这句话就是了
karma start test/unit/karma.conf.js 是使用karma测试server来运行测试
--single-run 是指定的参数，用来告诉karma将测试运行在所有指定的浏览器上
  2. 由于这是一个系统的配置文件，将涉及很多的模块和插件，所以这部分内容我将分多个文章讲解，请关注我博客的其他文章
  3. 关于注释
    • 当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请自行查看
  4. 上代码
// This is a karma config file. For more details see
//   http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
//   https://github.com/webpack/karma-webpack

// 下面是webpack.test.conf配置文件，先来解释这个配置文件的内容
// 详情请看 (1)
var webpackConfig = require('../../build/webpack.test.conf')

// 下面是karma测试文件的配置方式
// 先介绍一下karma,详情看 (2)
module.exports = function (config) {
    config.set({
        // to run in additional browsers:
        // 1. install corresponding karma launcher
        //    http://karma-runner.github.io/0.13/config/browsers.html
        // 2. add it to the `browsers` array below.
        // 这里使用的是PhantomJS作为浏览器测试环境，这个插件支持DOM, CSS, JSON, Canvas, and SVG.的解析
        browsers: ['PhantomJS'],
        // 下面的测试框架是用来测试js
        frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
        // 下面的是用来出报告的
        reporters: ['spec', 'coverage'],
        // 下面指的是index.js文件在browsers里面运行
        // 关于index.js其实就是把需要测试的文件都require进来，然后一股脑的在上面的browsers里面跑，使用frameworks测试js,通过reporters输出报告
        files: ['./index.js'],
        // 下面是为文件制定预处理器，也就是说测试index.js之前用webpack和sourcemap处理一下
        preprocessors: {
        './index.js': ['webpack', 'sourcemap']
        },
        下面给webpack指定相关的配置文件
        webpack: webpackConfig,
        webpackMiddleware: {
            noInfo: true
        },
        // 下面是覆盖报告
        // coverage是代码测试覆盖率的一个reporter，也就是说告诉你项目的代码有多少测试了
        // 下面是vue-cli对这个的一个配置
        coverageReporter: {
            dir: './coverage',
            reporters: [
                { type: 'lcov', subdir: '.' },
                { type: 'text-summary' }
            ]
        }
    })
}

解释

(1) 本文解释 webpack.test.conf.js 配置文件
    这个配置文件用来指定测试环境的webpack配置
    // This is the webpack config used for unit tests.
    // 下面是工具配置文件，用来处理各种css文件
    var utils = require('./utils')
    // 引入webpack模块，使用内置插件或者方法
    var webpack = require('webpack')
    // 下面是用webpack-merge插件，用来合并配置对象
    var merge = require('webpack-merge')
    // 下面是webpack.base.conf.js配置文件，请自行查看我的其他博客
    var baseConfig = require('./webpack.base.conf')
    // 下面是合并配置对象
    var webpackConfig = merge(baseConfig, {
    // use inline sourcemap for karma-sourcemap-loader
    module: {
        rules: utils.styleLoaders()
    },
    // 测试环境使用 inline-source-map生成map文件
    devtool: '#inline-source-map',
    resolveLoader: {
        // 下面是配置如何解析Loader的，就是说使用scss-loader实际用sass-loader
        alias: {
        // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 
        // see discussion at https://github.com/vuejs/vue-loader/issues/724
        'scss-loader': 'sass-loader'
        }
    },
    plugins: [
        // 下面设置环境变量process.env是"testing"
        new webpack.DefinePlugin({
            'process.env': require('../config/test.env')
        })
    ]
    })

    // no need for app entry during tests
    // 测试环境不需要入口文件，因为要测试的就是入口文件，哈哈
    // 使用delete操作符，删除对象中的某一项
    delete webpackConfig.entry

    module.exports = webpackConfig
(2) karma
    这个工具是一个平台，把模拟真实的浏览器插件、js测试框架等插件集合到一起构建一个用于测试代码的一个平台
    这个工具的基本用法就是
    module.exports = function(config){
        config.set({
            browsers: ['Chrome','Firefox'],
            ...
            // 这里还有很多设置项，具体查阅 https://karma-runner.github.io/latest/config/browsers.html
        })
    }

结语

这个测试框架如果有兴趣可以自行深入了解，难度不亚于webpack
后面还有一个 npm run e2e 这个命令运行的是 nightwatch的端到端的测试，也就是说，上面的操作是确保程序能够在浏览器中跑起来，而nightwatch是用来模拟用户来测试在浏览器中程序运行起来有没有bug，通过nightwatch的配置来测试
通过npm run test可以运行上面的所有设置
关于这部分内容，vue-cli只是做个一个框子出来，如果你想使用这部分东西你要编写部分配置，但是这部分内容对于前端来说显得有点牵强，说白了就是上手很难东西很多又不是特别重要。
这里我关于vue-cli的介绍就到此为止了，nightwatch的内容感兴趣的自己摸索吧

推荐阅读