• 前端单元测试笔记 —— 工具篇


    准备着手前端组件库的搭建,要求编写单元测试,前端的单元测试完全没接触过,所以从头学习了下,找了不少资料,所以想记录下。

    前端框架用的vue,现在搭建项目都很方便,不管哪个框架都会有脚手架,vue的脚手架是vue-cli,单元测试和e2e测试在搭建的时候选了就会自动下载相关的包,所以需要依赖哪些包,就先不研究了,直接基于脚手架的来处理。

    vue-cli init出来的项目,分prod,dev,testing,而testing是直接选用dev的相关配置,而实际公司的运用场景会分更多的环境:dev,test,integration,prod 即开发环境,测试环境,集成环境(这是个模拟仿真生产的环境,除了数据不连通,理论上来说,所有的配置要和生产一致,有些公司可能就三种环境,测试和集成合并成一个),生产环境,基本上就会有开发,测试,生产三种环境。

    而脚手架中搭出来的testing,其实是针对开发跑测试的一个环境,其实跟上面这三者不属于一个范畴,而在webpack的配置中,我们针对上面的三种环境会对脚手架搭出来的配置文件稍作修改:

    为了兼容各个环境,所以将这里换成是读取环境变量,而在执行代码打包时,在命令文件里都有对process.env.NODE_ENV,比如生产的npm run build 的build.js文件中:

    然后执行单元测试的时候配置文件中并没有这个变量的赋值,所以会导致命令报错:

    现在我的解决方案是在unit这个命令下,赋值环境变量:

     

    这些算是准备工作,webpack的基础配置方式,可以多看看webpack的官网。

    接着是单元测试的部分,脚手架中用的测试工具是karma,测试库是mocha,断言库是:chai

    脚手架已经集成好,但是脚手架里的这三个工具的基本用法还是需要了解一下,所以对应的相关教程(其实都是官网,对应的api当工具书来用):

    1karmahttps://karma-runner.github.io/2.0/config/configuration-file.html(配置相关)

    2mochahttp://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html

    3chaihttps://www.jianshu.com/p/f200a75a15d2

    执行完写的测试用例,会生成一份测试报告,但生成的测试报告上出现的几个名词完全没概念,statements和function 还能从字面上理解,branches就完全没头绪了,lines又让人困惑,lines和statements有啥区别呢?

    为此差了些资料,先是找到下面这篇文章:

    http://web.jobbole.com/84601/

    这篇文章开头就解释了下这几个名词:

    代码覆盖率

    测试的时候,我们常常关心,是否所有代码都测试到了。这个指标就叫做“代码覆盖率”(code coverage),它有四个测量维度。

    • 行覆盖率(line coverage):是否每一行都执行了?
    • 函数覆盖率(function coverage):是否每个函数都调用了?
    • 分支覆盖率(branch coverage):是否每个 if 代码块都执行了?
    • 语句覆盖率(statement coverage):是否每个语句都执行了?

     

    但文中对行覆盖率和语句覆盖率没做特别的解释,于是继续挖,又找到这篇博文:http://blog.hypers.io/2017/08/20/test-coverage/ 在这篇中涉及到的概念更多了,还有生成语法树的概念

    在查覆盖率概念的时候,在这篇中又发现了几个名词:

    https://baike.baidu.com/item/%E4%BB%A3%E7%A0%81%E8%A6%86%E7%9B%96%E6%B5%8B%E8%AF%95/8642107?fr=aladdin

    判断覆盖率,条件覆盖率,路径覆盖率,看概念是更困惑了~

    对于覆盖率的这些困惑看来只能稍后再结合实例来理解了。

     

    前端的很多测试是需要基于浏览器的,karma中默认的是phantomjs,如果想要启用其他浏览器,可以按照下面这个url里的教程进行相应处理 

    http://karma-runner.github.io/0.13/config/browsers.html

     

    这些都是为写用例的准备工作,下一篇用实例理解下这些概念。

  • 相关阅读:
    函数 对象 入门总结
    js 禁止复制粘贴全选
    CSS3个人盲点总结【总结中..........】
    was设置事务超时
    阿里前DBA的故事
    转型思考
    自卑
    关于BigDecimal的使用
    少睡与吸烟影响IQ
    DB2中OLAP函数使用示例
  • 原文地址:https://www.cnblogs.com/nianmumu/p/8417361.html
Copyright © 2020-2023  润新知