這裏搭建的環境是Jasmine作爲單元測試框架，Karma框架作爲自動化測試的框架。
1.首先需要下載相關的依賴，
"jasmine": "^2.8.0",
"jasmine-core": "^2.8.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter ": "^1.3.0",
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-mocha-reporter": "^2.2.4",
"karma-remap-istanbul": "^0.6.0",
"typescript": "2.3.4"
2.配置相關的文件
1.新建typings.json文件，寫入如下內容
{
"globalDependencies": {
"jasmine": "registry:dt/jasmine#2.5.2+20170317130948",
}
}
2.新建karma.conf.js文件，並寫入如下內容
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-remap-istanbul'),
require('karma-mocha-reporter'),
require('@angular/cli/plugins/karma')
],
files: [
{ pattern: './src/libriary/testing/preprocessors.ts', watched: false }
],
preprocessors: {
'./src/libriary/testing/preprocessors.ts': ['@angular/cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['mocha', 'karma-remap-istanbul']
: ['mocha'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
3.新建angular-cli.json，並寫入如下內容
{
"project": {
"version": "1.0.0",
"name": "app name"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets"
],
"index": "index.html",
"main": "./app/main.ts",
"polyfills": "../src/libriary/testing/polyfills.ts",
"test": "../src/libriary/testing/preprocessors.ts",
"tsconfig": "../src/libriary/testing/tsconfig.spec.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": ["../src/assets/lib/leaflet.js"],
"environmentSource": "../src/libriary/testing/environments/environment.ts",
"environments": {
"dev": "../src/libriary/testing/environments/environment.ts",
"prod": "../src/libriary/testing/environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
接下來是編寫相關的文件，具體地址是
轉載自 http://skyfly.xyz/2017/10/11/Front_End/ionic/how-to-settingup-unittest-for-ionic3x/
