资讯专栏INFORMATION COLUMN

前端单元测试之Karma环境搭建

mrli2016 / 3372人阅读

摘要:主要完成一下工作启动一个服务器,生成包含源代码和测试脚本的页面运行浏览器加载页面,并显示测试的结果如果开启检测,则当文件有修改时,执行继续执行以上过程。如果我们引入了一些其它的库,比如之类的,将源代码和库代码打包在一起后,覆盖率会更难看。。

前言

在前端开发中,测试常常是被忽略的一环。因此最近在研究前端自动化测试框架Karma,把个人的学习过程分享出来,希望对大家有帮助。

什么是Karma?

Karma是由Google团队开发的一套前端测试运行框架。它不同于测试框架(例如jasmine,mocha等),运行在这些测试框架之上。主要完成一下工作:

Karma启动一个web服务器,生成包含js源代码和js测试脚本的页面;

运行浏览器加载页面,并显示测试的结果;

如果开启检测,则当文件有修改时,执行继续执行以上过程。

Karma的安装配置 初始项目结构
karma-example
    ├── src
         ├── index.js
    ├── test
    ├── package.json

index.js的内容如下

function isNum(num) {
  if (typeof num === "number") {
    return true
  } else {
    return false
  }
}
安装Karma环境

为了方便搭建Karma环境,我们可以全局安装karma-cli来帮我们初始化测试环境:

npm i -g karma-cli

然后在项目中安装karma包

npm i --save-dev karma

接下来在工程目录中运行karma init来进行测试环境初始化,并按照指示一步步完成。

上图是选项的示例,这里使用jasmine测试框架,PhantomJS作为代码运行的环境(也可以选择其他浏览器作为运行环境,比如Chrome,IE等)。最后在项目中生成karma.conf.js文件。

至此就搭建好了基本的Karma运行环境。

运行Karma

在test目录里编写一个简单的测试脚本,我们使用的是jasmine测试框架,具体的api可以参考jasmine api,内容如下

describe("index.js: ", function() {
  it("isNum() should work fine.", function() {
    expect(isNum(1)).toBe(true)
    expect(isNum("1")).toBe(false)
  })
})

然后在项目根目录下运行karma start命令,我们可以看到运行的结果如下

可以看到,运行的结果显示测试成功。

同时,因为我们之前设置了监控文件的修改,所以当我们修改源文件或者测试脚本的时候,Karma会自动帮我们再次运行,无需我们手动操作。

Coverage

如何衡量测试脚本的质量呢?其中一个参考指标就是代码覆盖率(coverage)。

什么是代码覆盖率?简而言之就是测试中运行到的代码占所有代码的比率。其中又可以分为行数覆盖率,分支覆盖率等。具体的含义不再细说,有兴趣的可以自行查阅资料。

虽然并不是说代码覆盖率越高,测试的脚本写得越好(可以看看参考文献4),但是代码覆盖率对撰写测试脚本还是有一定的指导意义的。因此接下来我们在Karma环境中添加Coverage。

首先安装好Karma覆盖率工具

npm i --save-dev karma-coverage

然后修改配置文件karma.conf.js,

module.exports = function(config) {
  config.set({
    basePath: "",
    frameworks: ["jasmine"],
    files: [
      "src/**/*.js",
      "test/**/*.js"
    ],
    exclude: [],

    // modified
    preprocessors: {
        "src/**/*.js": ["coverage"]
    },

    //modified
    reporters: ["progress", "coverage"],

    // add
    coverageReporter: {
      type : "html",
      dir : "coverage/"
    },

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ["PhantomJS"],
    singleRun: false,
    concurrency: Infinity
  })
}

再运行karma start后,会在目录下生成coverage目录,里面有本次测试的覆盖报告。打开后的结果如下

使用Webpack+Babel

在实际项目中,有事会需要用到Webpack和ES6,所以接下来将Webpack和Babel集成进Karma环境中。

安装karma-webpack

npm i --save-dev karma-webpack

安装babel

npm i --save-dev babel-loader babel-core babel-preset-es2015

然后文件进行改造,src/index.js文件修改为

function isNum(num) {
  if (typeof num === "number") {
    return true
  } else {
    return false
  }
}

exports.isNum = isNum

text/index.js文件修改为

const Util = require("../src/index")

describe("index.js: ", () => {
  it("isNum() should work fine.", () => {
    expect(Util.isNum(1)).toBe(true)
    expect(Util.isNum("1")).toBe(false)
  })
})

接下来修改配置文件karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: "",
    frameworks: ["jasmine"],
    files: [
      "test/**/*.js"
    ],
    exclude: [],
    preprocessors: {
      "test/**/*.js": ["webpack", "coverage"]
    },
    reporters: ["progress", "coverage"],
    coverageReporter: {
      type: "html",
      dir: "coverage/"
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ["PhantomJS"],
    singleRun: false,
    concurrency: Infinity,
    webpack: {
      module: {
        loaders: [{
          test: /.js$/,
          loader: "babel",
          exclude: /node_modules/,
          query: {
            presets: ["es2015"]
          }
        }]
      }
    }
  })
}

注意这里的修改:

files只留下test文件。因为webpack会自动把需要的其它文件都打包进来,所以只需要留下入口文件。

preprocessors也修改为test文件,并加入webpack域处理器

加入webpack配置选项。可以自己定制配置项,但是不需要entry和output。这里加上babel-loader来编译ES6代码

运行karma start,成功了~

再看看Coverage,卧槽。。居然不是百分之百了。。。

原因很简单,webpack会加入一些代码,影响了代码的Coverage。如果我们引入了一些其它的库,比如jquery之类的,将源代码和库代码打包在一起后,覆盖率会更难看。。这样的Coverage就没有了参考的价值。

还好有大神给我们提供了解决方案,需要安装插件

npm i --save-dev babel-plugin-istanbul

修改webpack中babel-loader的配置

{
  test: /.js$/,
  loader: "babel",
  exclude: /node_modules/,
  query: {
    presets: ["es2015"],
    plugins: ["istanbul"]
  }
}

因为这里引入了istanbul插件来检测Coverage,所以要把preprocessors里的coverage去掉。

搞定以后,运行karma start。当当当当~一切OK啦,尽情编写测试脚本把~

最后附上示例项目地址:karma-example

References

Karma

Karma using ES6

Jasmine API

测试覆盖(率)到底有什么用?

Just Say No to More End-to-End Tests

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/8744.html

相关文章

  • 前端单元测试Karma环境搭建

    摘要:主要完成一下工作启动一个服务器,生成包含源代码和测试脚本的页面运行浏览器加载页面,并显示测试的结果如果开启检测,则当文件有修改时,执行继续执行以上过程。如果我们引入了一些其它的库,比如之类的,将源代码和库代码打包在一起后,覆盖率会更难看。。 前言 在前端开发中,测试常常是被忽略的一环。因此最近在研究前端自动化测试框架Karma,把个人的学习过程分享出来,希望对大家有帮助。 什么是Kar...

    Cc_2011 评论0 收藏0
  • 使用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增加单元

    摘要:但是,项目中的一些公共封装,比如公共的组件公用的功能模块等是可以使用单元测试的。因此特为组件库引入单元测试,目的在于能减少组件的,避免重复的发布不必要的包。 项目github地址:https://github.com/yuanalina/installAsRequired这里必须要提前说明,前端项目的单元测试不是必须的,特别是业务型项目,增加单元测试反而会成为累赘,增加开发成本且无意义...

    happen 评论0 收藏0
  • 前端单元测试(未完。。)

    摘要:基础知识作用为提供浏览器测试环境,为真正测试框架,为断言库测试用例基础块称为测试套件,表示一组相关的测试。它也是一个函数,第一个参数是测试用例的名称,第二个参数是一个实际执行的函数。 基础知识 karma作用为提供浏览器测试环境,mocha为真正测试框架,chai为断言库 测试用例基础 describe块称为测试套件(test suite),表示一组相关的测试。它是一个函数,第一个...

    ACb0y 评论0 收藏0
  • 前端组件的测试

    摘要:的配置文件是为了解析那些需要测试的源文件相关的文件,然后再给的单元测试用例去识别。其作用是仅仅渲染至虚拟节点,不会返回真实的节点,能极大提高测试性能。 为解放劳动力,发展生产力 测试有了这般变化: 鼠标点击手动测试 -> 用脚本模拟,自动化测试 Vue中的组件测试 需要安装的包 全局安装:babel、mocha、karma 其他局部安装的包在下面的【测试环境搭建】最下方配置文件中给出...

    haobowd 评论0 收藏0
  • Angular单元测试系列-简介

    摘要:单元测试我们可以将其分成两类独立单独测试与测试工具集。工具集还有更多,这一切我们将在单元测试组件与指令单元测试逐一说明。那么下一篇,我们将介绍如何使用进行单元测试。 本文将探讨如何搭建测试环境、以及Angular测试工具集。 测试环境 绝大部分都是利用Angular Cli来创建项目,因此,默认已经集成我们所需要的npm包与脚本;当然,如果你是使用自建或官网 quickstart 的话...

    CNZPH 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<