轉載自樓主個人博客 Mocha 和 Chai 入門初探

Chai

在和 jest 作比較的時候, 兩者主要的不同就是 jest 的集成度比較高內置斷言庫, 而 mocha 需要搭配額外的斷言庫, 在此選擇了比較流行的 chai 作為斷言庫.

風格的選擇

其中 chai 又有好幾種斷言風格, 我們經常見到的其實就是 BDD 風格的 should / expect.

其中我較喜歡 should, 因為它可以直接以屬性的方式嵌入所有內置原生對象, 所以可以很方便的以 variable.should.equal(someValue) 的形式來書寫斷言, 和 expect 相比較可以省略一對 () ... 如果是 expect 風格的話, 上述示例代碼等價于 expect(variable).to.equal(someValue). 在一般情況下兩者的使用時幾乎相同的, expect 作為斷言的開始, should 接在想要斷言的變量之后. 但是有一些地方 should 就需要變換一下我上述所說的寫法了.

Should

should 實際上是給所有的對象都擴充了一個 getter 屬性 should, 如果你想在瀏覽器中運行測試的話, should 在 IE 瀏覽器中會有一些問題. 正是因為 should 是擴充了 Object.prototype, 所以如果變量的值為 null 或 undefined 的時候, 是無法使用 .should.equal() 的形式的, 因為 null, undefined 的原型不是 Object,所以should 不存在. 所以此時應當如下所示使用.

const sould = require('chai').should();...should.not.exist.(variable); // variable 的值不應該是 null 或者 undefined

Mocha

現在我們來看看如何對 mocha 進行配置以及上手的步驟. 我假定在 mocha 中寫測試的時候也同樣需要使用 ES6 語法, 還有一個關注點是如果我在 webpack.config.js 中已經設置了 alias, 那么在寫測試代碼的時候, 我希望導入的文件也可以使用 alias 來保持我路徑的一致性以及與此同時帶來的便利性.

配置

下載依賴

npm install --save-dev mocha chai

接下來只要在項目根目錄下新建文件夾 test, 在里面寫的測試文件以 *.test.js 命名, 接下來在 packag.json 文件中 配置 npm test 命令.

"npm test": "./node_modules/.bin/mocha"

還可以在 test 根目錄下新建一個配置文件 mocha.opts, 其中配置的選項相當于給 mocha 命令加入了命令行參數.

--recursive
--ui bdd

具體的配置請參照文檔 Mocha - USAGE.

之后在終端輸入 npm run test 即可運行測試.

支持 ES6

上述只是配置好了基本的運行環境, 如果需要支持 ES6 的話, 那么還需要兩個簡單的步驟.

npm install --save-dev babel-register

然后修改 mocha.opts

--recursive
--ui bdd
--require babel-register

完成, 現在已經支持 ES6 語法了.

支持 Webpack 的 Alias

如果不需要請跳過此步驟, 需要的推薦一個本人基于一個開源庫修改的 babel 插件 babel-plugin-webpack-alias-resolve.

寫測試

直接上代碼! 有一個對 axios 經過封裝的 ajax 函數, 我現在對其進行測試. 下面是代碼在 Gist 的地址 the test for ajax which based on axios

結束

寫的很少 ... 正在實踐當中, 其實測試上述那個文件的時候我已經踩了一些坑了, 但是寫出來還是不夠多, 等踩多了總結一下踩過的那些坑.