如何搭建测试环境？Angular测试工具集介绍

"jasmine-core": "~2.5.2",

"jasmine-spec-reporter": "~3.2.0",

"karma": "~1.4.1",

"karma-chrome-launcher": "~2.1.1",

"karma-cli": "~1.0.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"karma-coverage-istanbul-reporter": "^0.2.0"

// Karma configuration file, see link for more information

// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function(config) {

    config.set({

        // 基础路径（适用file、exclude属性）

        basePath: '',

        // 测试框架，@angular/cli 指Angular测试工具集

        frameworks: ['jasmine', '@angular/cli'],

        // 加载插件清单

        plugins: [

            require('karma-jasmine'),

            require('karma-chrome-launcher'),

            require('karma-jasmine-html-reporter'),

            require('karma-coverage-istanbul-reporter'),

            require('@angular/cli/plugins/karma')

        ],

        client: {

            // 当测试运行完成后是否清除上文

            clearContext: false // leave Jasmine Spec Runner output visible in browser

        },

        // 哪些文件需要被浏览器加载，后面会专门介绍  `test.ts`

        files: [

            { pattern: './src/test.ts', watched: false }

        ],

        // 允许文件到达浏览器之前进行一些预处理操作

        // 非常丰富的预处理器：https://www.npmjs.com/browse/keyword/karma-preprocessor

        preprocessors: {

            './src/test.ts': ['@angular/cli']

        },

        // 指定请求文件MIME类型

        mime: {

            'text/x-typescript': ['ts', 'tsx']

        },

        // 插件【karma-coverage-istanbul-reporter】的配置项

        coverageIstanbulReporter: {

            // 覆盖率报告方式

            reports: ['html', 'lcovonly'],

            fixWebpackSourcePaths: true

        },

        // 指定angular cli环境

        angularCli: {

            environment: 'dev'

        },

        // 测试结果报告方式

        reporters: config.angularCli && config.angularCli.codeCoverage ?

            ['progress', 'coverage-istanbul'] :

            ['progress', 'kjhtml'],

        port: 9876,

        colors: true,

        // 日志等级

        logLevel: config.LOG_INFO,

        // 是否监听测试文件

        autoWatch: true,

        // 测试浏览器列表

        browsers: ['Chrome'],

        // 持续集成模式，true：表示浏览器执行测试后退出

        singleRun: false

    });

};

customLaunchers: {

    Chrome_travis_ci: {

        base: 'Chrome',

        flags: ['--no-sandbox']

    }

}

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/dist/long-stack-trace-zone';

import 'zone.js/dist/proxy.js';

import 'zone.js/dist/sync-test';

import 'zone.js/dist/jasmine-patch';

import 'zone.js/dist/async-test';

import 'zone.js/dist/fake-async-test';

import { getTestBed } from '@angular/core/testing';

import {

  BrowserDynamicTestingModule,

  platformBrowserDynamicTesting

} from '@angular/platform-browser-dynamic/testing';

// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.

declare var __karma__: any;

declare var require: any;

// Prevent Karma from running prematurely.

__karma__.loaded = function () {};

// First, initialize the Angular testing environment.

getTestBed().initTestEnvironment(

  BrowserDynamicTestingModule,

  platformBrowserDynamicTesting()

);

// Then we find all the tests.

// 所有.spec.ts文件

const context = require.context('./', true, /\.spec\.ts$/);

// And load the modules.

context.keys().map(context);

// Finally, start Karma to run the tests.

__karma__.start();

describe('demo test', () => {

    it('should be true', () => {

        expect(true).toBe(true);

    })

});

Chrome 58.0.3029 (Windows 10 0.0.0): Executed 1 of 1 SUCCESS (0.031 secs / 0.002 secs)