web - 怎么写好Javascript单元测试？

Question

如题，比如代码组织，设计思路之类的。

Answer 1

1. 并不是所有的 js 都需要单元测试
2. 并不是所有的 js 都能够单元测试

我认为 80% 以上的网站是不需要单元测试的，单元测试一般应用在中大型的项目。但是，在这需要测试的 20% 网站中，又有很大一部分由于代码书写和组织的问题，而不能进行单元测试。

@evanyou 提到了，「良好的模块化和解耦」，很赞同。要想测试，首先，得让你的代码能够测试。不用把代码写的和面条一样。

「工欲善其事，必先利其器」，选择合适的测试工具。参考 IBM 的这篇文章：http://www.ibm.com/developerworks/cn/web/wa-tools/index.html

Answer 2

尝试过写，但是尝试过之后就会特别佩服那些有时间写单元测试的人。

Answer 3

客户端js单元测试的前提是良好的模块化和解耦。代码首先要被区分成任务明确，相对独立的模块，才能相对轻松地写单元测试。

Answer 4

这个问题是针对JavaScript的，那么也包含Node.js了 :) 单元测试要求你在开发的第一天就代码的可测试性。如果你熟悉Node.js，那么mocha是个很好的单元测试框架。 如果要测试网页或者网页的一部分，那么结合Zombie很方便。

Answer 5

当我们调用一个 function 的时候，输出是我们所期望的输出吗？当我们初始化一个 class 时，他的初始化值是我们认为他所应有的吗？这就需要我们做单元测试。现在有很多流行的JS单元测试frameworks, 比如 Jasmine, QUnit, and Mocha.

Mocha: nodejs里的开源测试框架:

describe('tests for the reporter library', function() {
  beforeEach(function() {
    // do some setup code
  }
  afterEach(function() {
   // do some cleanup code
  }
  it('renders the reporter template properly', function() {
    // test stuff
  }
  it('responds to the ajax request correctly', function(done) {
    // in some callback, call:
    done();
  }
});

Chai: 经常与Mocha一起使用的函数判断框架, 文法非常人性化:

  chai.expect(2+2).to.be.equal(4);
  chai.expect(2+2).to.be.greaterThan(3);

Phantom: 可虚拟DOM和events. 无需浏览器对页面操作进行测试. 这个可以对大大缩短后期的程序纠错难度。比如, 下面测试是检查单击事件是否改变一些DOM元素的属性:

 var view = new ReporterView().render();
 view.$el.find('input[value=quiz-wronggrade]').click();

  var $tips = view.$el.find('[data-problem=quiz-wronggrade]');
  chai.expect($tips.is(':visible'))
    .to.be.equal(true);
  chai.expect($tips.find('h5').eq(0).text())
    .to.be.equal('Tips');