Jest初識——單元測試並自動化報告

Jest初識——單元測試並自動化報告

---

準備工做

安裝jest

cnpm install --save-dev jest

查看版本

jest -V

• 確保你的項目已經安裝了版本較新的jest測試框架(隨版本更迭有可能產生沒法預知的BUG，如：配置屬性名變動)
• 已完成對jest配置文件jest.config.js的基本配置

---

實現單元測試

首先要作的事情：我怎麼知道要測試些什麼？
若是你正在編寫 Web 應用，那麼一個好的起點就是測試應用的每一個頁面和每一個用戶交互。但 Web 應用由單元代碼組成，如函數和組件，須要單獨進行測試。不少時候有兩種狀況：

• 你正接手一些函數功能未知的祖傳代碼
• 你要實現以前沒有的新功能

對於這兩種狀況，你能夠經過將測試看做檢查給定函數是否產生預期結果來幫助本身。 如下是典型測試流程的樣子：

1. 導入要測試的函數
2. 給函數輸入
3. 定義指望
4. 檢查是否按照預期輸出

只需這樣執行：輸入 - 預期輸出 - 斷言結果

測試用例

如下是一個完整的測試用例

• 建立js文件，描述測試函數

//utils.js
   export function fixedZero(val) {
     return val * 1 < 10 ? `0${val}` : val;
   }

• 建立.test.js文件,添加斷言

//utils.test.js
import { fixedZero } from './utils';
...
// describe('函數分組測試描述',() => {
//   test('測試描述', () => {
//       expect("").toBe("");
//   });    
// })

describe('fixedZero tests', () => {
  it('should not pad large numbers', () => {
    expect(fixedZero(10)).toEqual(10);
    expect(fixedZero(11)).toEqual(11);
    expect(fixedZero(15)).toEqual(15);
    expect(fixedZero(20)).toEqual(20);
    expect(fixedZero(100)).toEqual(100);
    expect(fixedZero(1000)).toEqual(1000);
    expect(fixedZero(1000)).toEqual(1000);
  });

  it('should pad single digit numbers and return them as string', () => {
    expect(fixedZero(0)).toEqual('00');
    expect(fixedZero(1)).toEqual('01');
    expect(fixedZero(2)).toEqual('02');
    expect(fixedZero(3)).toEqual('03');
    expect(fixedZero(4)).toEqual('04');
    expect(fixedZero(5)).toEqual('05');
    expect(fixedZero(6)).toEqual('06');
    expect(fixedZero(7)).toEqual('07');
    expect(fixedZero(8)).toEqual('08');
    expect(fixedZero(9)).toEqual('09');
  });
});

在命令行輸入npm test utils.test.js，咱們能夠看到命令臺的返回

---

實如今瀏覽器上實現測試結果的顯示

當咱們對一些比較龐大的項目，要進行成百上千個函數進行單元測試時，測試結果僅僅顯示在控制檯明顯不夠看。如何優雅的讓測試結果展現出來，並能夠詳細的觀察測試結果的具體問題呢？

咱們會想到將jest的測試結果 --> 存儲 --> 發請求(簡單服務器) --> 發送到瀏覽器 --> 展現

---

方法

• 1.咱們能夠經過nodejs實現可是須要配置一個簡單的node服務器，來實如今瀏覽器顯示。可是方法過於繁瑣，不在贅述。
• 2.咱們藉助於報告工具jest-html-report(本質與第一個方法沒有區別，只是這個工具是打包好的，能夠直接使用)

參數配置

• 根據jest官方文檔在jest.config.js中有testResultsProcessor屬性：

Property	Description	Type	Default
testResultsProcessor	This option allows the use of a custom results processor. This processor must be a node module that exports a function expecting an object with the following structure as the first argument and return it:	string	undefined

這個屬性能夠容許結果處理程序使用。這個處理器必須是一個輸出函數的node模塊，這個函數的第一個參數會接收測試結果，且必須在最終返回測試結果。能夠用與於接收測試結果，且在最終返回測試結果

首先咱們安裝它：cnpm install jest-html-report --save-dev

在jest.config.js中，具體配置jest-html-reporter的屬性

用到的屬性：

Property	Description	Type	Default
pageTitle	The title of the document	string	"Test Suite"
outputPath	The path to where the plugin will output the HTML report	string	"./test-report.html"
includeFailureMsg	If this setting is set to true, this will output the detailed failure message for each failed test.	boolean	false

其餘屬性參考官方文檔：https://github.com/Hargne/jes...

完成jest.config.js中對jest-html-reporter的配置：

//jest.config.js
       module.exports={
           ...
           testResultsProcessor:'./testReport',
           reporters: [
           'default',
           [
             './node_modules/jest-html-reporter',
             {
               //輸出頁面標題
               pageTitle: 'Test Report',
               //插件將會輸出的HTML報告的路徑。
               outputPath:'testReport/JesttestReport.html',
               //爲每一個失敗的測試輸出詳細的失敗消息。
               includeFailureMsg: true,
             },
           ],
         ],
       }

再次在命令行輸入npm test utils.test.js，咱們能夠看到測試結果被成功返回在testReport/JesttestReport.html中

咱們打開這個html文件，測試結果的可視化就完成啦。

---

總結

• 掌握了實現單元測試的方法
• 實現了前端單元測試自動化生成報告

---

參考文章

• 如何將jest的測試結果轉移到頁面上
• 關於 jest 測試結果如何在瀏覽器上顯示的問題

文檔

• Jest官方文檔:https://jestjs.io/docs/en/getting-started.html
• jest-html-reporter官方文檔：https://github.com/Hargne/jest-html-reporter/wiki/configuration