在這一系列文章的一開始,我們使用了 Jasmine 框架來撰寫單元測試程式。然而,除了 Jasmine 之外,我們也可以在 Angular 專案內使用 Jest 框架來撰寫測試程式。
Jest 是一套由 Facebook 所開發的前端測試框架,常使用在 React 與 Vue 專案中。與 Jasmine 相同,Jest 裡內含了撰寫測試所需要的 API 語法;不同的是,Jest 本來也是測試的執行器,因此可以在 Ternimal 終端機直接使用 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 所撰寫的測試程式。