• 前端单元测试之小试牛刀


       两年前观摩大神短短几十行代码代替了原本几百行的冗余代码,惊讶的心情到现在记忆犹新,大神说是因为使用了单元测试。我当时真是弱的很,看了半天也没有看懂大神的代码,更遑论理解单元测试的应用,心里暗暗地对单元测试产生了一些想法,后经周转一直没有机会实施。现在,终于有点点空档,找到相关教程,跃跃欲试。

      我的参考文档详见https://www.w3ctech.com/topic/2172

      首先需要安装相关依赖:

    • NodeJS - 正常前端项目应该都有用到,所以大家应该都有
    • Jest - 是我学习的教程里使用的单元测试库

      以上依赖安装流程大家自行百度。

      在确保node版本 》= 6.x之后新建一个测试项目目录,比如my-first-test-projsect。接着初始化该项目:npm init --yes,最后安装Jest。

      准备工作做好了,可以开始编写自己的第一个单元测试了。

      定义一个简单的函数作为要测试的代码

      教程中定义的sum.js如下:

    module.export = function sum (a, b) {
        return a + b;
    }

    可是我实际操作测试时报错TypeError: sum is not a function,改为如下则能正确测试,这又是另外一个值得思考的问题了,有兴趣可以自行查阅相关原因,相信作者是笔误。

    module.exports = function sum (a, b) {
        return a + b;
    }

    编写测试文件

    现在要进入正题了,准备编写测试Spec文件。通常写在要测试的代码文件旁,如sum.spec.js。

    (Jest和其他测试框架将测试组织到测试用例中,为了简单管理和记录,每个测试用例包含多个单独的测试)。

    sum.spec.js编写如下:

    const sum = require('./sum.js');
    describe('sum suite', function() {
      test('should add 2 positive numbers together and return the result', function() {
        expect(sum(1, 2)).toBe(3);
      })
    })

    第一行const sum = require('./sum.js');很好理解,就是引入了sum.js。后面的语句相对生涩,找几个不太懂的词语比如describe/test/expect/toBe。

    Jest作为全局变量,提供了 describe 、test 、 expect 和一些其他函数,因此你无需导入他们

    describe即定义了测试单元,test(...)即是我们添加的第一个单元测试。

    expect(sum(1,2)).toBe(3)是单元测试的构建块,被称为“断言(assertion)”

    toBe 被称作为“匹配器(matcher)”。在 Jest 里有很多的匹配器,每一个匹配器都有助于验证一个特定的方面:比如测试对象是否相等等。

    运行单元测试

    更改package.json里面的内容,从而使用npm脚本运行测试

    "scripts": {
        "test": "jest"
     }

    运行 npm run test,你将会看到成功的输出。第一个单元测试就OK啦

  • 相关阅读:
    三层架构之解耦
    自动升级 组件
    C语言常量与指针
    ASP.NET MVC Model元数据
    Web层后端权限模块
    java中文排序问题(转)
    JDWP
    bat执行java程序的脚本解析
    jdom dom4j解析xml不对dtd doctype进行验证(转)
    Dom4j SAXReader Constructors
  • 原文地址:https://www.cnblogs.com/july-Vivian/p/10839007.html
Copyright © 2020-2023  润新知