基于Nodejs的前端单元测试（2）—mocha + require.js

上一篇《基于Nodejs的前端单元测试（1）—mocha》 中给你们展现了最基本的基于node.js的前端单元测试，感觉到了前端开发也是真正的开发人员，也须要单元测试，保证咱们开发的代码的健壮性。可是，上篇例子中展现的内容连玩具都不是，只是给你们感觉前端单元测试的魅力，这篇主要是我在项目遇到的实际问题的解决方式。

咱们的产品对前端开发不够重视，开发方式比较粗旷，野蛮生长。形成前端部分的代码真是百花齐放、各显神通呀，什么形式都有。想从根本解决如今的状态不太现实，只能作一些力所能及的改变，就想到了单元测试。咱们的产品中使用require.js对前端js进行模块化，天然要基于require.js模块作测试。

下面就把我写验证demo的过程跟你们分享下。

1. 最好是能看下《基于Nodejs的前端单元测试（1）—mocha》这篇文章
2. 准备基础的运行环境，安装使用的node模块，在上篇的基础上须要在增长两个模块requrejs和requirejs-mock。requirejs：用来加载和解析require.js定义的模块；requirejs-mock:模拟require模块，有模块依赖时很是好用，并且在测试require模块时也很是方便。

   npm install requirejs requirejs-mock should

3. 单模块，无依赖
   • 新建测试模块，b.js

      1 define([], function(){
      2     var B = function(){
      3         this.name = "B";
      4     }
      5 
      6     B.prototype.hello = function(){
      7         return "Hello B"
      8     }
      9 
     10     B.prototype.getName = function(){
     11         return this.name;
     12     }
     13 
     14     return B;
     15 });

      

   • 单元测试用例， testB.js

      1 var assert = require("should");
      2 var requirejs = require('requirejs');
      3 var Injector = require('requirejs-mock').provide(requirejs);
      4 
      5 // require.js环境配置，
      6 // 配置参数与原有require.js一致
      7 requirejs.config({
      8     baseUrl: __dirname + "/../",
      9     nodeRequire: require
     10 });
     11 
     12 describe('基于node的前端单元测试，加载requirejs模块', function() {
     13     var injector;
     14 
     15     // 执行第一个测试用例以前调用
     16     before(function() {
     17         injector = Injector.create();
     18     });
     19 
     20     // 执行完全部测试用例以后调用
     21     after(function() {
     22         injector.destroy();
     23     });
     24 
     25 
     26     it("test B", function(){
     27         //加载requir模块
     28         var B = injector.require('js/b');
     29         assert.equal(typeof B, "function");
     30         assert.equal(new B().hello(), "Hello B");
     31     });
     32 });

      

   • 运行  mocha

     　　
4. 多模块，有依赖
   • 再增长一个模块 a.js，依赖模块b

      1 define(["b"], function(B){
      2     var A = function(){
      3 
      4     }
      5 
      6     A.prototype.hello = function(){
      7         return "Hello A"
      8     }
      9 
     10     A.prototype.getFullName = function(){
     11         var b = new B();
     12         return "A." + b.getName();
     13     }
     14 
     15     return A;
     16 });

      

   • 若是如今模仿模块B的测试方法，就会报错。 加载模块A时，没有找到模块B，这个时候我就须要另外一个重要的测试模块requirejs-mock

     • 　　
   • 改写咱们的单元测试用例test.js，增长模块依赖的mock

      1 var assert = require("should");
      2 var requirejs = require('requirejs');
      3 var Injector = require('requirejs-mock').provide(requirejs);
      4 
      5 requirejs.config({
      6     baseUrl: __dirname + "/../",
      7     nodeRequire: require
      8 });
      9 
     10 describe('基于node的前端单元测试，加载requirejs模块', function() {
     11     var injector;
     12     var B;
     13 
     14     // 在跑每一个测试用例以前都会执行
     15     // beforeEach(function() {
     16     //     injector = Injector.create();
     17     //     B = injector.require('js/b');
     18     //     injector.mock('b', B);
     19     // });
     20 
     21     // 在跑每一个测试用例以后都会执行
     22     // afterEach(function() {
     23     //     injector.destroy();
     24     // });
     25 
     26     // 执行第一个测试用例以前调用
     27     before(function() {
     28         injector = Injector.create();
     29         // 加载模块B
     30         B = injector.require('js/b');
     31         // 将模块放到缓存中，加载依赖模会从缓存中查找
     32         injector.mock('b', B);
     33     });
     34 
     35     // 执行第一个测试用例以后调用
     36     after(function() {
     37         injector.destroy();
     38     });
     39 
     40 
     41     it("test B", function(){
     42         var B = injector.require('js/b');
     43         assert.equal(typeof B, "function");
     44         assert.equal(new B().hello(), "Hello B");
     45     });
     46 
     47     it("test A", function(){
     48         var A = injector.require('js/a');
     49         assert.equal(typeof A, "function");
     50         assert.equal(new A().hello(), "Hello A");
     51         assert.equal(new A().getFullName(), "A.B");
     52     });
     53 });

   • 如今执行test.js测试用例，用例经过。
5. 总结
   1. 彻底符合AMD的模块规范，须要测试接口请先暴露出来
   2. 模块的依赖不会自动加载，请先将依赖模块放到mock的缓存中
   3. 测试的模块中，请不要包含window等浏览器对象，单元测试会报错