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

375

这里我记录下搭建基于 karma+mocha+webpack3+vue2 的测试环境。因为之前折腾了一段时间,发现的坑挺深的,防止后面再次掉进坑里,留个笔记。如果这边文章能解决大家遇到的问题那就更好了 :wink:

1、需要安装哪些包

以下列出来的包安装在项目中即可,还有几个包需要全局安装: babel、mocha、karma

babel 相关的:

  • babel-core

  • babel-plugin-syntax-jsx // 支持 jsx 语法

  • babel-plugin-transform-runtime // 描述太晦涩, 官方文档: github.com/babel/babel…

  • 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、断言 包

  • 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 相关

  • 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 核心包

  • vue
  • vue-template-compiler
  • vue-router

2、如何配置

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

webpack3 配置文件
我是手动创建一个webpack.test.config.js 文件,然后内容配置如下

webpack 相关知识可以参考我之前写的一篇

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配置文件

直接 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' }
            ]
        }
    })
}

3、搭建目录结构

├─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)

4、简单的 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')
  })
})

5、测试输出

在 package.json 中配置命令:

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

输出结果:
2

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