基於Nodejs的前端單元測試（2）—mocha + require.js

時間 2019-11-18

標籤基於 nodejs 前端單元測試 mocha require.js require 欄目 JavaScript 简体版

原文原文鏈接

上一篇《基於Nodejs的前端單元測試（1）—mocha》中給你們展現了最基本的基於node.js的前端單元測試，感覺到了前端開發也是真正的開發人員，也須要單元測試，保證咱們開發的代碼的健壯性。可是，上篇例子中展現的內容連玩具都不是，只是給你們感覺前端單元測試的魅力，這篇主要是我在項目遇到的實際問題的解決方式。html

咱們的產品對前端開發不夠重視，開發方式比較粗曠，野蠻生長。形成前端部分的代碼真是百花齊放、各顯神通呀，什麼形式都有。想從根本解決如今的狀態不太現實，只能作一些力所能及的改變，就想到了單元測試。咱們的產品中使用require.js對前端js進行模塊化，天然要基於require.js模塊作測試。前端

下面就把我寫驗證demo的過程跟你們分享下。node

最好是能看下《基於Nodejs的前端單元測試（1）—mocha》這篇文章
準備基礎的運行環境，安裝使用的node模塊，在上篇的基礎上須要在增長兩個模塊requrejs和requirejs-mock。requirejs：用來加載和解析require.js定義的模塊；requirejs-mock:模擬require模塊，有模塊依賴時很是好用，並且在測試require模塊時也很是方便。
```
npm install requirejs requirejs-mock should
```

單模塊，無依賴

新建測試模塊，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.jsnpm

 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瀏覽器

多模塊，有依賴

再增長一個模塊 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 });