01-搭建单元测试环境

文章主要记录搭建单元测试环境的历程

安装

初始化项目

默认你安装了Node的环境，项目初始化使用的yarn这个包管理工具

yarn init
yarn add webpack-cli --dev // 安装打包工具
yarn add webpack --dev

安装测试运行框架karma

详细文档：karma

yarn add karma --dev
yarn add karma-webpack --dev // karma结合webpack使用
yarn add karma-sourcemap-loader --dev // 安装sourcemap-loader
yarn add karma-chrome-launcher --dev // 运行时打开Chrome(以chrome运行环境)

安装测试框架

上面一步安装的是测试运行框架，这一步安装一个你熟悉的测试框架,我这里安装mocha

yarn add mocha karma-mocha --dev

安装断言库

选择你熟悉的断言库，我这里使用chai

yarn add chai --dev

分割线...需要的库全部安装完毕了.

---

配置

需求1：可以在命令行里面执行命令，运行测试用例, 比如 npm run unit

编辑package.json, 在key为scripts中添加如下图的代码

上面执行了 karma start karma.conf.js,下面看下karma.conf.js的内容

不明白的地方看注释!!!

var webpackConfig = require('./webpack.test.config')
delete webpackConfig.entry // 不需要入口文件， 
webpackConfig.devtool = 'inline-source-map' // devtool 由 karma-sourcemap-loader处理
module.exports = function (config) {
  config.set({
    frameworks: ['mocha'], // 测试框架 mocha

    files: [
      'test/index.js' // 测试入口文件 test下面的index.js
    ],
    preprocessors: {
      'test/index.js': ['webpack', 'sourcemap'] // test/index.js 由webpack 和 sourcemap预处理 
    },
    browsers: ['Chrome'],
    webpack: webpackConfig, // webpack的配置
    webpackMiddleware: {
      noInfo: true
    },
    autoWatch: true
  })
}

下面是webpack的配置

下面是测试用例

import test from 'src' // webpack上面配置的别名, 被测试代码所在目录
var expect = require('chai').expect;  // 引入chai的expect

describe('test的测试', function() {
  it('输出hello world', function() {
    expect(test()).to.be.equal('hello world'); // 断言
  });
});

下面是被测试的代码

---

整个流程

整个代码地址