iT邦幫忙

2022 iThome 鐵人賽

DAY 29
2
Modern Web

今天我想來在 Angular 應用程式上加上測試保護系列 第 29

Day 29 - 番外篇 - 在 Angular 專案安裝 Jest 測試框架

  • 分享至 

  • xImage
  •  

前言

在這一系列文章的一開始,我們使用了 Jasmine 框架來撰寫單元測試程式。然而,除了 Jasmine 之外,我們也可以在 Angular 專案內使用 Jest 框架來撰寫測試程式。

什麼是 Jest 框架

https://ithelp.ithome.com.tw/upload/images/20221014/20109645dQyrblckBI.png

Jest 是一套由 Facebook 所開發的前端測試框架,常使用在 React 與 Vue 專案中。與 Jasmine 相同,Jest 裡內含了撰寫測試所需要的 API 語法;不同的是,Jest 本來也是測試的執行器,因此可以在 Ternimal 終端機直接使用 jest 命令來執行測試程式。

在 Angular 專案中安裝 Jest 框架

由於 Jest 本身是測試框架與執行器,因此一開始會把 Angular 專案內的 Jasmine 與 Karma 相關的套件移除掉,並安裝 Jest 相關套件。

npm uninstall @types/jasmine jasmine-core karma karma-chrome-launcherkarma-coverage karma-firefox-launcher karma-jasmine karma-jasmine-html-reporter karma-spec-reporter
npm install @types/jest eslint-plugin-jest jest jest-preset-angular

安裝 Jest 套件後,可以先在 package.json 檔案加入 Jest 的執行命令。

"scripts": {
  "test:jest": "jest",
  "test:jest-watch": "jest --watch",
  "test:jest-coverage": "jest --coverage"
}

接下來,在專案目錄下新增 jest.config.js 來設定 Jest 框架組態。

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

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

在此組態中,除了指定了測試目錄路徑與檔案名稱外,也指定 Jest 框架在 Angular 專案中的預設設定;而此設定還需要在新建的 src/setupJest.ts 檔案中引用。

import 'jest-preset-angular';

另外,由於我們還是會使用 TypeScript 撰寫 Jest 測試程式,所以需要修改 tsconfig.spec.json 檔案所使用的測試框架。

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

最後,修改 src/test.ts 檔案,讓 Jest 相關的模組可以載入 Angular 的測試環境中。

import 'jest-preset-angular/setup-jest';

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,
    };
  },
});

接下來

這一篇說明了如何在 Angular 專案中安裝與設定 Jest 框架,讓我們可以在 Angular 專案利用 Jest 來撰寫單元測試程式。接下來,我們來修改之前利用 Jasmine 所撰寫的測試程式。

參考資料


上一篇
Day 28 - 自動化測試 - 利用 GitHub Actions 執行測試
下一篇
Day 30 - 番外篇 - 利用 Jest 框架撰寫測試程式
系列文
今天我想來在 Angular 應用程式上加上測試保護30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言