搭建Ionic2的单元测试环境（基于angular2的环境下延伸）

这里搭建的环境是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/