webpack手动搭建vue项目（六）—— Karma+Mocha+chai单元测试

Karma 是一个启动浏览器运行测试并生成报告的测试运行器。我们会使用 Mocha 框架撰写测试，同时使用 chai 作为断言库。参考

1.安装依赖

> npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha

完成后添加测试脚本

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

 2.创建karma.conf.js文件

在创建karma.conf.js文件之前先创建webpack.test.js文件:

const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.base')

module.exports = merge(common, {
    devtool: '#eval-source-map',
	plugins: [
		new webpack.DefinePlugin({
			'process.env.NODE_ENV': JSON.stringify('test'),
			'process.env.Mock': true
		})
	]
})

在项目的主目录创建一个 karma.conf.js 文件：

/ karma.conf.js

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

module.exports = function(config) {
  config.set({
    frameworks: ['mocha'],

    files: ['test/**/*.spec.js'],

    preprocessors: {
      '**/*.spec.js': ['webpack', 'sourcemap']
    },

    webpack: webpackConfig,

    reporters: ['spec'],

    browsers: ['Chrome']
    //reporters: ['spec', 'coverage'],  注释掉的为配置测试覆盖率后面会讲到

    //coverageReporter: {
		//dir: './coverage',
		//reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }]
	//}
  })
}

3. 选用一个断言库

> npm install chai karma-chai --save-dev

4.添加一个测试

在 src 中创建一个名为 Counter.vue 的文件：

<template>
  <div>
    {{ count }}
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },

    methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

 

然后添加一个名为 test/Counter.spec.js 的测试文件，并写入如下代码：

import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import Counter from '../src/Counter.vue'

describe('Counter.vue', () => {
  it('increments count when button is clicked', () => {
    const wrapper = shallowMount(Counter)
    wrapper.find('button').trigger('click')
    expect(wrapper.find('div').text()).contains('1')
  })
})

接下来我们可以运行测试：

npm run test

Woohoo，我们的测试跑起来了！

5.总结

注意：在上文五中提到的api-path文件中如果测试调用接口数据，需要：

const mockIp = process.env.NODE_ENV === 'test' ? 'http://localhost:8080' : '' // 此处的ip主要提供为单元测试时候用可以为任意ip

所以路径示例为:`${mockIp}/url`