jest 測試入門(一)

說實話,做爲前端來講,單元測試,並非一種必須的技能,可是確實一種可讓你加法的技能
以前我一個庫添加了單元測試,加完以後感悟頗深,因此寫下這篇文章來記錄

環境搭建

通常來講,普通的庫,若是沒有添加 babel 的話,在 test 裏面,也是不能使用 es6 的語法的
總結來講 test 文件的兼容性是和普通文件同樣的

正常 JS

這個搭建環境就有關於 babel 的搭建

npm i -D @babel/core @babel/preset-env babel-jest jest

添加文件 babel.config.js:

module.exports = {  
  presets: [  
  ['@babel/preset-env', {targets: {node: 'current'}}],  
  '@babel/preset-typescript',  
  ],  
  plugins: ["@babel/plugin-proposal-class-properties"]  
};

若是有特效的語法需求,則須要添加其餘的 babel 包,如:

npm i -D @babel/plugin-proposal-class-properties

在 package.json 中添加

"jest": {  
  "testMatch": \[  
  "<rootDir>/test/?(\*.)(spec|test).{js,jsx,ts,tsx}"  
  \],  
  "transform": {  
  "^.+\\\\.\[t|j\]s?$": "babel-jest"  
  },  
  "transformIgnorePatterns": \[  
  "<rootDir>/node\_modules/(?!(lodash-es|other-es-lib))"  
  \],  
  "testEnvironment": "jsdom",  
  "moduleFileExtensions": \[  
  "web.js",  
  "js",  
  "web.ts",  
  "ts",  
  "web.tsx",  
  "tsx",  
  "json",  
  "web.jsx",  
  "jsx",  
  "node"  
  \]  
}

typescript

若是你使用的是 typescript,那麼就不須要添加 babel,只須要以下三個庫便可

@types/jest ts-jest jest

在 package.json 中:
將

"transform": {  
  "^.+\\\\.\[t|j\]s?$": "babel-jest"  
  },

改成:

"transform": {  
  "^.+\\\\.\[t|j\]s?$": "ts-jest"  
},

便可

關於 jest 參數

testMatch[array<string>]

(默認值:[ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)" ])

Jest用於檢測測試文件的全局模式。 默認狀況下，它會在__tests__文件夾內查找.js，.jsx，.ts和.tsx文件，以及帶有.test或.spec後綴的任何文件。 （例如，Component.test.js或Component.spec.js）。 它還會找到名爲test.js或spec.js的文件。

transform [object<string, pathToTransformer | [pathToTransformer, object]>]

默認值：undefined

從正則表達式到轉換器路徑的映射。 轉換器是提供同步功能以轉換源文件的模塊。 例如，若是您但願可以在模塊或測試中使用節點尚不支持的新語言功能，則能夠插入許多將JavaScript的將來版本編譯爲當前版本的編譯器之一。 示例：請參見examples / typescript示例或webpack教程

transformIgnorePatterns[array<string>]

默認值︰["node_modules"]

轉換前與全部源文件路徑匹配的regexp模式字符串數組。 若是測試路徑與任何模式匹配，則將不會對其進行轉換。

testEnvironment [string]

默認值︰"jsdom"

將用於測試的測試環境。 Jest中的默認環境是經過jsdom的相似於瀏覽器的環境。 若是要構建節點服務，則可使用node選項來使用相似節點的環境。

moduleFileExtensions[array<string>]

Default:["js", "json", "jsx", "ts", "tsx", "node"]

模塊使用的文件擴展名數組。 若是您須要模塊而未指定文件擴展名，則這些是Jest將按從左到右的順序查找的擴展名。

以上說明來自於 jest 官網

實戰

此處以個人庫 storage 來舉例

首先想要測試就要窮舉因此可能出現的狀況

describe('Normal setting', () => {  
  test('set value', () => {  
  localStorage.clear();  
  
  const ins = storage.set('gre', '123456');  
  expect(ins.value).toBe('123456');  
  expect(ins.status).toBe(0);  
  expect(ins.key).toBe(preId + 'gre');  
  })  
})

此處能夠看作一個 localStorage 的 setItem;

expect 的做用是驗證 代碼的數據 和你想要獲得的數據是否相同,
若是相同,那麼就表明測試經過,反正則未經過;
expect 後面跟着的方法不少,具體能夠去官網查看:
官網傳送門

測試結果

使用命令來運行 test 文件:

"test": "jest --coverage"

test 的結果以下:

coverage 選項的做用是生成文檔,來記錄這次的測試結果,
而結果文檔基本生成在根文件目錄下的 coverage 目錄下,如圖:

在 lcov-report 目錄下,可直接在瀏覽器內運行 index.html ,這個文件的運行結果和 test 結果相同;

還有更加有用的東西:
運行 index.ts.html,能夠看到一個相似於 git 提交的一個東西:

能夠看到你的 test 代碼中,哪些代碼是運行到的,哪些是未運行到的,
再根據此文件的結果來優化另外的代碼;

結語

若是簡單的測試,實際上是一個很容易的技能,可是各類情景都是不同的,好比有項目里加入了 react 和 redux 等等,光是配置都是比較麻煩的,因此後面還須要本身努力,去接觸各類各樣的狀況

此文中使用的項目連接:
https://github.com/Grewer/storage-DAO