换一种思路写代码,前端测试驱动开发模式(TDD)快速入门

4,200 阅读5分钟

什么是测试驱动开发模式

测试驱动开发(Test-Driven Development)是一种软件开发的思维和方法,我的理解是它是一种开发的循环,先写测试代码,再用最小的代码实现这个测试,再继续写测试代码,继续用最小的代码实现。当实现所有的测试用例,代码也就完成了。

最近也在实践Tdd开发,和之前先开发,再自测的方向不同,这次的开发顺序是, 文档--->测试用例--->代码--->测试通过--->下一个测试用例。这样做有以下优缺点:

优点

  • 在开始可以比较明确自己要做什么,把错误暴露在整个开发流程比较靠前的位置,修改的成本也比较小
  • 在之后对代码优化的过程中,因为有测试代码的存在,可以更好的优化代码,优化完之后再执行一遍代码,而不用担心优化过程中又出错
  • 通过测试代码,可以帮助理清楚程序中关键点
  • 也更有利于之后的维护

缺点

  • 加上测试的代码,会适当增加一些工作量
  • 可能会测的不全面

总体来说,如果对一些基数设施的建设,比如基础组件等,需要长期维护的项目,Tdd的应用,还是利大于弊。

前端TDD开发环境的搭建

如果想应用Tdd的方法到前端的开发中,主要用到以下几个工具(工具的用法在后面介绍):

mocha.js

mocha 主要提供了describe的语法,用来描述测试用例,并且把执行测试后的结果清楚的返回到终端上。
官网:mochajs.org
github: github.com/mochajs/moc…

chai.js

chai 主要提供了断言函数assert,用来断言和比较测试的结果和代码执行的结果。
官网: www.chaijs.com/
github: github.com/chaijs/chai
assert库方法文档:www.chaijs.com/api/assert/…

sinon.js

sinon 主要用来mock一些东西,比如可以用sinon mock一个假的函数,sinon也可以返回这个函数执行与否。
官网: sinonjs.org
github: github.com/sinonjs/

基础环境搭建

先npm init生成一个项目。 再执行以下安装语句:

npm install sinon moncha chai sinon-chai --save-dev

建立一个test文件夹,可以把写测试用例的Js放在这个文件夹中, 为了可以方便执行单元测试,可以加一个npm scripts,在package.json的scripts中加入如下语句,表示使用mocha去执行test文件夹下的js测试:

"scripts":{
  "test": "mocha test/**/*.js"
}

在test中建立一个js文件,在文件的中引入这些工具,为了连接sinon 和 chai,要使用到sinon-chai

const chai = require("chai")
const sinon = require("sinon")
const sinonChai = require("sinon-chai")
chai.use(sinonChai)
const assert = chai.assert // 从chai中引出assert

如何实施TDD

如何写一个单元测试

首先我们看一个简单的单元测试代码:

describe('测试navigateTo方法', ()=>{
  it("new router后存在navigateTo方法", ()=>{
    let newRouter = new VictRouter()
    assert.isFunction(newRouter.navigateTo)
  })
})
  • describe()表示测试的一个大范围,第一个参数是范围的名字,第二个是一个回调函数,其中可以放单元测试代码
  • it()里写单元测试的代码,第一个参数还是这个测试的名字,第二个回调函数中放入单元测试代码
  • assert 就是断言代码执行后的结果是什么,比如这个例子中,因为要测试"实例化后存在navigateTo方法",就断言new之后的实例包含navigateTo这个函数,所以用到了assert的isFunction的方法
  • 写完之后运行npm run test, 就能看到测试的运行结果了,如果没有报错就是测试成功了

如何写多个单元测试代码:

直接在describe中加入多个it函数即可:

describe('测试navigateTo方法',()=>{
    it(`new router 后存在navigateTo方法`, ()=> {
      let newRouter = new VictRouter()
      assert.isFunction(newRouter[key])
    })
  it(`navigateTo的入参类型必须为object`, ()=>{
    let newRouter = new VictRouter()
    let badFn = function() { throw new newRouter[navigateTo]('1111')}
    assert.throws(badFn, 'this.commonDirectFn is not a function')
  })
})

npm run test之后可以执行所有的测试

一般的测试思路

  • 可以先从最简单的开始测试,比如存在某个方法,入参的类型等等
  • 最好是先写测试用例,再写业务代码
  • 用尽量小的成本实现测试

善用throw抛出错误

在执行的代码中,特别在开始一些对入参的判断的代码,可以使用throw出错误,再用assert捕获这个错误,这样可以比较方便的测试入参是否符合预期。但是使用assert.throws的时候,要用一个函数包装要测试的代码:

  it(`navigateTo的入参类型必须为object`, ()=>{
    let newRouter = new VictRouter()
    let badFn = function() { throw new newRouter[navigateTo]('1111')} // 这里用一个函数包装
    assert.throws(badFn, 'this.commonDirectFn is not a function') // 再把包装后的函数传入throws
  })

使用sinon模拟函数

如果需要模拟一个函数,可以用sinon去模拟,使用方法:sinon.fake(),并且课已通过这个sinon的called方法判断函数是否被执行。

let fn = sinon.fake() //生成一个模拟函数
assert(fn.called) //断言这个函数是否被执行

小结

本文只是对Tdd的一个简单介绍,适用于快速入门。mocha,chai,sinon的一些高级的用法,还需要通过实践去学习。 另,本文只是对但纯js的测试,react,vue和小程序都有他们自己的ui测试的方案。 想通过本文,让大家可以简单了解Tdd,并且学到一种新的思路去写代码。