前端测试驱动开发模式(TDD)快速入门

测试驱动开发（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，并且学到一种新的思路去写代码。

原文转自：https://juejin.im/post/5d7710bae51d453bb13b66b0