Jest unit test

在angular中利用Jest進行測試之解析

江志卿 2019/12/23 10:06:06

2 1387

前言

有些人會程式碼寫一寫後，沒再寫單元測試，編譯後沒問題，直接就交給QC測試，測試中出了問題再回頭改。但在某個專案中，突然遇到客戶的要求:需要進行單元測試，並且以SonarQube進行程式碼檢查以及覆蓋率至少要達到80%以上。剛收到需求時頓時間腦子裡充滿問號，從沒接觸過測試，不知道從何開始。測試是要測試甚麼?甚麼是覆蓋率?

接下來說一下測試的流程，我們會在專案中安裝測試的工具，寫好單元測試碼，在本地端先進行程式碼的測試，如果本地端跑過沒有錯誤訊息，在命令列上會出現目前的覆蓋率(覆蓋率簡單來說就是你的單元測試碼佔整個專案中應該測試而已經測試的比率。)。此時我們再把code push上git server，再以CI/CD工具讓SonarQube去跑一份測試報告。SonarQube是分析程式碼品質的工具，它以七個指標來分析程式碼品質：程式架構面、多餘程式碼、單元測試、複雜度、潛在問題、編碼規則以及註解。所以在SonarQube中能清楚看到各項指標評比後的分數，以及建議改善的地方。下圖為在SonarQube中觀看某專案的儀錶板畫面。

在本文中，我不介紹SonarQube的安裝，僅介紹在本地端，如何做到利用Jest進行單元測試，得到測試報告。Jest是由Facebook所開發的一套測試框架，功能相當齊全，它具有以下幾個特色：

強大的模仿功能(內建mock function，能模擬程式碼的方法並回傳mock值)。
內置斷言庫。
內置的程式碼覆蓋率生成器。
以JSDOM模擬瀏覽器的DOM，讓使用者在運行test case時，無須任何額外的設定。

安裝設定

1、利用angular-cli建立一新專案。

ng new my-app

2、在專案中安裝所需套件

npm install jest jest-preset-angular @types/jest --save-dev

3、在專案的根目錄下建立jest.config.js，jest.config.js為Jest的設定檔，它會在我們專案中src層的資料夾中尋找.spec.ts檔案，並且在運行測試之前，會先在記憶體中編譯專案的Typescript程式碼。

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig');

module.exports = {
  preset: 'jest-preset-angular',
  roots: ['<rootDir>/src/'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
  collectCoverage: true,
  coverageReporters: ['lcov','text-summary'],
  coverageDirectory: 'coverage/my-app',
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
    prefix: '<rootDir>/'
  })
};

4、更新src/test.ts檔案內容。主要用途為引入jest-preset-angular模組以設置angular測試環境;以及模擬全域windows物件的一些屬性及功能，以確保測試可以在JSDOM環境中運行。

import 'jest-preset-angular';

Object.defineProperty(window, 'CSS', {value: null});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance']
    };
  }
});

Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>'
});
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true
    };
  }
});

5、更改tsconfig.spec.json的內容。

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest",
      "node"
    ],
    "esModuleInterop": true,
    "emitDecoratorMetadata": true
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

6、執行npx jest，即可獲得運行結果。