mocha配合babel7實現單元測試的一些注意事項

前言

本文寫於2019-03-26，技術文章具備時效性，請結合當前版本作相應的調整

mocha及斷言庫chai的安裝

安裝在本身的項目上

yarn add mocha chai -D
// 或
npm i --save-dev mocha chai
複製代碼

最終：

"devDependencies": {
   "chai": "^4.2.0",
   "mocha": "^6.0.2"
}
複製代碼

babel7的安裝

yarn add @babel/core @babel/cli @babel/preset-env @babel/register -D
// 或
npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/register
複製代碼

最終：

"devDependencies": {
   "@babel/cli": "^7.2.3",
   "@babel/core": "^7.4.0",
   "@babel/preset-env": "^7.4.2",
   "@babel/register": "^7.4.0",
   "chai": "^4.2.0",
   "mocha": "^6.0.2"
}
複製代碼

增長babel.config.js文件

const presets = [
  [
    "@babel/env"
  ]
]
module.exports = { presets }
複製代碼

添加test命令腳本

"scripts": {
   "test": "./node_modules/.bin/mocha --require @babel/register test/*/*.spec.js"
}
複製代碼

一、其中的重點在於--require @babel/register這個命令，在目前找到的大多數教程中用的是

// babel7
--compilers js:@babel/register
// babel7以前
--compilers js:babel-core/register
複製代碼

但實際上--compilers這個方法已經被廢棄了，具體能夠查看wiki: compilers-deprecation

二、test/*/*.spec.js指向的是測試文件位置

實現測試方法

util目錄下的date.js

/** * @description 閏年判斷 * @date 2019-03-26 * @param {*} year * @returns {boolean} */
export function isLeapYear(year) {
  if (!year) return
  return year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)
}

/** * @description 獲取該月有多少天 * @date 2019-03-26 * @param {(string | number)} date * @returns {number} */
export function getDaysOfMonth(date) {
  let d
  if (typeof date === "string" || typeof date === "number") {
    d = new Date(date)
  } else d = date
  const month = d.getMonth() + 1
  const year = d.getFullYear()
  if (month === 2) return isLeapYear(year) ? 29 : 28
  if ([1, 3, 5, 7, 8, 10, 12].includes(month)) return 31
  else return 30
}
複製代碼

test/unit/date.spec.js

import { isLeapYear, getDaysOfMonth } from '../../util/date'
import { expect } from 'chai'

describe('isLeapYear', () => {
  it('2020年是閏年', () => {
    expect(isLeapYear(2020)).to.be.true
  })
  it('今年不是閏年', () => {
    expect(isLeapYear(2019)).to.be.false
  })
  it('2000年是閏年', () => {
    expect(isLeapYear(2000)).to.be.true
  })
})

describe('getDaysOfMonth', () => {
  it('本月有31天', () => {
    expect(getDaysOfMonth(new Date())).to.equal(31)
  })
  it('1月有31天', () => {
    expect(getDaysOfMonth('2019-01-12')).to.equal(31)
  })
  it('2月有28天', () => {
    expect(getDaysOfMonth('2019-02-12')).to.equal(28)
  })
})
複製代碼

執行yarn test 或 npm run test，最終結果以下:

生成測試覆蓋率報告

若是有須要的話咱們也能夠使用mochawesome生成一個代碼覆蓋率報告，其展現形式包括頁面展現、json文件等

安裝：

yarn add mochawesome -D
// 或
npm install --save-dev mochawesome
複製代碼

能夠經過配置來指定報告生成的位置及文件名，具體操做爲在test腳本命令中加入

// reportDir 指報告生成的文件夾
// reportFilename 報告名稱
--reporter mochawesome --reporter-options reportDir=test/report,reportFilename=date

// 最終的test腳本
"scripts": {
    "test": "./node_modules/.bin/mocha --require @babel/register test/*/*.spec.js --reporter mochawesome --reporter-options reportDir=test/report,reportFilename=date"
}
複製代碼

再次運行腳本能夠看到

測試報告已經寫入了指定位置

頁面展現以下

工具

jsdoc-to-markdown 自動生成文檔

jsdom-global 經過在代碼中添加DOM，您能夠在node.js中對大部分客戶端代碼進行單元測試