Jasmine 框架 + Karma 測試執行工具是 Angular 普遍使用的單元測試組合,也是官方推薦的方法。
而 Webpack 也算 Angular 打包程式碼的主流工具,為了讓開發、測試及正式環境都用一樣的方式打包程式碼;
所以本篇 Angular 4 (Angular 2) 的單元測試 (Unit Test) 將介紹 Jasmine+Karma+Webpack 組合使用。
前言
程式碼是由 Angular 4 教學 - 從頭開始 延伸,把 SystemJS 改為 Webpack 打包。
Webpack 打包可以參考這篇。
本篇檔案結構如下:
1 | index.html # 起始頁面 |
1. 安裝 npm 套件
本篇用到跟單元測試相關的 7 個套件,如下:
Jasmine+Karma 主要會用到的套件有:
jasmine-core
karma
karma-jasmine
karma-jasmine-html-reporter
要在 Karma 中執行 Webpack,需要另外安裝套件:
karma-webpack
由於我是用 Chrome 開發及測試,所以裝了這個套件,當啟動 Karma 就會開啟 Chrome 進行測試。
其他瀏覽器也有相關套件:karma-chrome-launcher
karma-phantomjs-launcher
karma-firefox-launcher
karma-edge-launcher
karma-ie-launcher
karma-opera-launcher
karma-safari-launcher
為了讓
require.context()
方法可以在 TypeScript 使用,所以要安裝定義檔:@types/webpack-env
安裝指令:
1 | npm install --save-dev jasmine-core karma karma-jasmine karma-jasmine-html-reporter karma-webpack karma-chrome-launcher @types/webpack-env |
2. 組態設定
2.1. Webpack 設定
編輯 webpack.config.js
1 | var webpack = require("webpack"); |
有一點要注意,在測試階段不要啟用
CommonsChunkPlugin
。其他部分就保留原本 Webpack 使用的設定即可。
2.2. Karma 設定
新增 karma.conf.js
1 | var webpackConfig = require("./webpack.config.js"); |
- files: 是設定單元測試需要載入的檔案。可以換成自己的路徑。
- preprocessors: 啟動單元測試前要做的事。
這邊我做的是把app/main.test.ts
用 Webpack 打包。 - browsers: 如果要用其他瀏覽器執行測試,除了要安裝套件,也要在這邊設定。
2.3. 單元測試進入點
新增 app/main.test.ts
1 | Error.stackTraceLimit = Infinity; |
- require.context() 會把指定路徑的符合 *.spec.ts 的檔案,都當作測試案例載入。
- 參數1: 我把 main.test.ts 放在 app 資料夾,所以
"."
指的就是/app/
資料夾。 - 參數2: 是否包含子目錄。
- 參數3: 這邊指定
*.spec.ts
檔案,都是單元測試的測試案例檔,也可以換成其他的檔案格式或名稱。
2.4. NPM 指令設定
編輯 package.json
1 | { |
設定完成後,就可以用指令執行測試:
1 | npm run test |
3. 測試案例
Jasmine 測試框架的基本架構:
1 | describe("測試案例的描述", () => { |
我在 app.component.spec.ts 建立了 4 個簡單的測試案例:
- 驗證 AppComponent 是否能被實例化成功。
- 驗證
<h1 />
內的文字,是否符合預期。 - 必成功的測試案例。
- 必失敗的測試案例。
1 | import { ComponentFixture, TestBed } from "@angular/core/testing"; |
執行結果
指令執行:
1 | npm run test |
進入 debug.html
頁面後,可以看到全部測試案例的執行結果:
程式碼下載
參考
https://angular.io/guide/testing
https://angular.io/guide/webpack#test-configuration
https://hahoangv.wordpress.com/2016/11/08/unit-testing-with-karma-and-jasmine-in-angular2/
https://github.com/webpack-contrib/karma-webpack