使用mocha測試純前端的javascrit

網路上搜尋到的範例中，通常都是mocha搭配chai，測試nodejs伺服器端的程式。 要如何測試純前端讀取的javascript file呢？

nodejs的javascript，透過模組化的概念，每寫完一個function 後，必須把function export成一個模組， 在測試檔案中使用require(filepath/file)引入後，才可以對其作測試。

然而目前的網頁瀏覽器都還不認識ES6 的 export 寫法。 如果要使用這架構開發測試，最後還要經過webpack之類的程序，將ES6的 js code 編譯成目前瀏覽器看得懂的js版本。 其實是一個不小的負擔。

其實也可以直接測試瀏覽器看得懂的前端js檔案。但是必須是支援模組概念的js code才行。

再純js中，沒有所謂的class，所有的組成都是object及function。在 javascript中，global環境即是一個object。任何新產生的 function，都是一個都會掛在global物件之下。然而，nodejs中，為了要實現模塊化，因此檔案跟檔案之間的global物件是不共享的。 這跟傳統瀏覽器編譯的js行為不一樣。傳統的瀏覽器編譯js，會將所有宣告的function掛在共同的global下，也就是window（大概吧，沒求証過）

因此，要透過mocha測試前端code，就是要想辦法讓程式碼產生 export 的效果。

下面為其中一種方式（沒有在瀏覽器端測試過，不失用起來會不會不一樣）：

// first.js
(function(exports) {
  "use strict";
  function firstFun() {
    return "hello, howard";
  }
  exports.first = firstFun;
})(this);


//first.test.js
var chai = require('chai');
var assert = chai.assert;
var first = require('./first');

describe('FirstTestFromOtherFile', function () {
  var ans = 'hello, howard';
  it('should be equal', function() {
    assert(ans === first.first(), 'return value is not equal');
  });
});

this 以及 window(global)

引用：https://wcc723.github.io/javascript/2017/12/15/javascript-use-strict/

在"use strict"模式下，function 內的 this不再是window物件。 除非有使用bind將this與window bind 起來。 如此可以區隔開不同的function的global scope，在實作模組化的時候比較不會發生問題。