karma+mocha+webpack3 搭建 vue2 单元测试环境

时间 2019-11-06

标签 karma+mocha+webpack3 karma mocha webpack 搭建 vue2 vue 单元测试环境繁體版

原文原文链接

这里我记录下搭建基于 karma+mocha+webpack3+vue2 的测试环境。由于以前折腾了一段时间，发现的坑挺深的,防止后面再次掉进坑里，留个笔记。若是这边文章能解决你们遇到的问题那就更好了?javascript

一、须要安装哪些包

如下列出来的包安装在项目中便可，还有几个包须要全局安装：
babel、mocha、karmacss

babel 相关的：html

babel-core
babel-plugin-syntax-jsx // 支持 jsx 语法
babel-plugin-transform-runtime // 描述太晦涩，官方文档： https://github.com/babel/babe...
babel-plugin-transform-vue-jsx // 支持 vue2.x jsx 语法
babel-preset-env // 能够根据您所支持的环境自动肯定您须要的Babel插件和polyfills（.babelrc 配置）
babel-preset-es2015
babel-preset-stage-2
babel-runtime
babel-polyfill // 支持老版本浏览器

karma、mocha、断言包vue

karma
mocha
chai // BDD 、TDD 断言框架
chalk // 终端里能够给输出内容添加颜色
karma-mocha
karma-coverage // 生成代码覆盖率
karma-phantomjs-launcher // phantomjs 启动器
karma-phantomjs-shim // 能够支持 phantomjs 默认不支持的功能，如 Object.assign 等...
karma-sinon-chai
karma-spec-reporter // 终端里输出测试结果
karma-webpack // karma 支持 webpack 插件，有了它就不会报 找不到requirejs的错误信息了
phantomjs-prebuilt // phantomjs 经过 npm 安装的版本
sinon // 测试辅助工具，提供 spy、stub、mock 三种测试手段，模拟特定场景
sinon-chai

webpack 相关java

webpack
babel-loader
css-loader
istanbul-instrumenter-loader // 代码覆盖率统计工具
karma-sourcemap-loader
style-loader
url-loader
vue-loader
vue-style-loader
extract-text-webpack-plugin

vue 核心包node

vue
vue-template-compiler
vue-router

二、如何配置

上面那么一大坨包安装好了，接下来该配置。配置主要是两个，一是 karma 的配置文件，另外一个是 karma 须要的webpack 配置文件。webpack 的配置文件是为了解析那些须要测试的源文件的，说白了就是 vue 相关的文件，而后再给karma 的单元测试用例去识别。webpack

webpack3 配置文件
我是手动建立一个webpack.test.config.js 文件，而后内容配置以下git

webpack 相关知识能够参考我以前写的一篇github

var path = require("path")
var webpack = require("webpack")
var ExtractTextPlugin = require('extract-text-webpack-plugin')

function resolve(dir) {

    return path.join(__dirname, '..', dir)
}

var webpackConfig = {

    module: {

        rules: [

            // babel-loader
            {
                test: /\.js$/,
                use: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },

            // 为了统计代码覆盖率，对 js 文件加入 istanbul-instrumenter-loader
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                include: /src|packages/,
                enforce: 'post',
                use: [{
                    loader: "istanbul-instrumenter-loader",
                    options: {
                        esModules: true
                    },
                }]
            },

            // vue loader
            {
                test: /\.vue$/,
                use: [{
                    loader: 'vue-loader',
                    options: {
                        // 为了统计代码覆盖率，对 vue 文件加入 istanbul-instrumenter-loader
                        preLoaders: {
                            js: 'istanbul-instrumenter-loader?esModules=true'
                        }
                    }
                }]
            },

            // css loader
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'vue-style-loader'
                })
            },

            // img loader
            {
                test: /\.(png|gif|jpe?g)(\?\S*)?$/,
                use: [{loader: 'url-loader'}]
            },

            // font loader
            {
                test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
                use: [{loader: 'url-loader'}]
            },
        ]
    },

    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'), // 调用组件的时候方便点
        }
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        })
    ]
}

module.exports = webpackConfig

karma配置文件web

直接 cd 到你的项目，而后执行下面命令，会提示你是否使用 require.js、浏览器环境、测试脚本存放位置等等。

$ karma init

以后就会生成一个karma.config.js 文件，配置形式我是直接仿照vue-cli 官方的例子：

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

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.
        browsers: ['PhantomJS'],
        frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
        reporters: ['spec', 'coverage'],
        files: ['index.js'],
        preprocessors: {
            './index.js': ['webpack', 'sourcemap']
        },

        webpackMiddleware: {
            noInfo: true
        },
        // 不显示 `webpack` 打包日志信息
        webpackServer: {
            noInfo: true
        },
        webpack: webpackConfig,
        coverageReporter: {
            dir: './coverage',
            reporters: [
                { type: 'lcov', subdir: '.' },
                { type: 'text-summary' }
            ]
        }
    })
}

三、搭建目录结构

├─build 
│      webpack.test.config.js
│
├─src 
│
├─package.json
│
└─test 
      └─unit
          │  index.js
          │  karma.config.js
          │
          ├─coverage
          │
          └─specs
               *.spec.js

测试文件相关都放置在 test/unit 下，入口文件为 index.js，每一个vue 组件对应的测试用例名为组件名称.spec.js，根据 istanbul-instrumenter-loader 文档的说明，测试总入口文件 index.js 内容以下：

import Vue from 'vue'

Vue.config.productionTip = false

// 测试全部以 .spec.js 名称结尾的文件
// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

// 要求除main.js以外的全部src文件进行覆盖
// 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, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)

四、简单的 vue 组件单元测试

咱们在 src 目录下建立一个 Hello.vue 组件

<template>
   <div>msg</div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

而后在 test/unit/specs 下建立一个 Hello.spec.js 文件，再写个简单的单元测试用例：

import Vue from 'vue'
import Hello from '@/components/Hello'

describe('Hello.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(Hello)
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })
})

五、测试输出

在 package.json 中配置命令：

// package.json
 "scripts": {
    "test": "karma start test/unit/karma.config.js --single-run"
  }

输出结果：

同时在 test/unit/coverage 生成测试报告。以上就是一个简单的 vue 单元测试实例。最后奉上源代码

首发于个人我的博客