테스트 환경을 설정하는 방법은 무엇입니까? Angular 테스트 도구 세트 소개

이 기사에서는 테스트 환경과 Angular 테스트 도구 세트를 구축하는 방법에 대해 설명합니다.

테스트 환경

대부분은 Angular Cli를 사용하여 프로젝트를 생성하므로 필요한 npm 패키지와 스크립트는 기본적으로 통합되어 있습니다. 물론 자체 구축 또는 공식 웹사이트 빠른 시작을 사용하는 경우에는 다음이 필요합니다. 자체 설치이지만 모든 핵심 데이터는 동일합니다. [관련 튜토리얼 추천: angular 튜토리얼]

Angular 단위 테스트는 독립적인 개별 테스트와 Angular 테스트 도구 세트의 두 가지 범주로 나눌 수 있습니다.

Pipe 및 Service는 새 인스턴스 클래스만 필요하므로 어떤 방식으로든 Angular 구성 요소와 상호 작용할 수 없기 때문에 독립적인 테스트에 적합합니다. new 实例类即可；同样是无法与Angular组件进行任何交互。

与之相反就是Angular测试工具集。

测试框架介绍

Jasmine

Jasmine测试框架提供了编写测试脚本的工具集，而且非常优秀的语义化，让测试代码看起来像是在读一段话。

Karma

有测试脚本，还需要Karma来帮忙管理这些脚本，以便于在浏览器中运行。

Npm 包

如果你非要折腾，那么最简单的办法便是通过Angular Cli创建一个新项目，然后将以下Npm包复制到您折腾的项目中。

    "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 运行器运行起来，而对于 Jasmine，是在我们编写测试脚本时才会使用到，因此，暂时无须过度关心。

我们需要在根目录创建 karma.conf.js 文件，这相当于一些约定。文件是为了告知karma需要启用哪些插件、加载哪些测试脚本、需要哪些测试浏览器环境、测试报告通知方式、日志等等。

karma.conf.js

以下是Angular Cli默认提供的 karma 配置文件：

// 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
    });
};

以上配置基本上可以满足我们的需求；一般需要变动的，我想是测试浏览器列表了，因为karma支持所有市面上的浏览器。另外，当你使用 Travis CI 持续集成时，启动一个禁用沙箱环境Chrome浏览器会让我们少了很多事：

        customLaunchers: {
            Chrome_travis_ci: {
                base: 'Chrome',
                flags: ['--no-sandbox']
            }
        }

有关karma config文件的所有信息，请参与官网文档。

test.ts

在编写 karma.conf.js 时，我们配置过浏览器加载的文件指向的是 ./src/test.ts 文件。作用是为了引导 karma 启动，代码也简单许多：

// 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();

一切就绪后，我们可以尝试启动 karma 试一下，哪怕无任何测试代码，也是可以运行的。

如果是Angular Cli那么 ng test。折腾的用 node "./node_modules/karma-cli/bin/karma" start

最后，打开浏览器：http://localhost:9876，可以查看测试报告。

简单示例

既然环境搭好，那么我们来写个简单示例试一下。

创建 ./src/demo.spec.ts 文件。.spec.ts为后缀这是一个约定，遵守它。

describe('demo test', () => {
    it('should be true', () => {
        expect(true).toBe(true);
    })
});

运行 ng test 后，我们可以在控制台看到：

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

或者浏览器：

1 spec, 0 failures
demo test
  true is true

不管怎么样，毕竟我们已经进入Angular单元测试的世界了。

Angular测试工具集

普通类诸如Pipe或Service，只需要通过简单的 new 创建实例。而对于指令、组件而言，需要一定的环境。这是因为Angular的模块概念，要想组件能运行，首先得有一个 @NgModule 定义。

工具集的信息量并不很多，你很容易可以掌握它。下面我简略说明几个最常用的：

TestBed

TestBed 就是Angular测试工具集提供的用于构建一个 @NgModule 测试环境模块。当然有了模块，还需要利用 TestBed.createComponent 创建一个用于测试目标组件的测试组件。

异步

Angular到处都是异步，而异步测试可以利用工具集中 async、fakeAsync그 반대는 Angular 테스트 도구 세트입니다.

테스트 프레임워크 소개

🎜🎜🎜🎜Jasmine🎜🎜🎜Jasmine 테스트 프레임워크는 테스트 스크립트 작성을 위한 도구 세트를 제공하며, 뛰어난 의미 체계로 인해 테스트 코드가 단락을 읽는 것처럼 보입니다. 🎜🎜🎜Karma🎜🎜🎜테스트 스크립트가 있으며, 이러한 스크립트가 브라우저에서 실행될 수 있도록 관리하는 데 Karma가 필요합니다. 🎜🎜🎜🎜Npm 패키지🎜🎜🎜🎜만들어야 한다면 가장 쉬운 방법은 Angular Cli를 통해 새 프로젝트를 생성한 후 다음 Npm 패키지를 해당 프로젝트에 복사하는 것입니다. 🎜rrreee🎜그럼 우리에게 가장 중요한 것은 구성 스크립트 부분을 살펴보는 것입니다. 🎜

🎜구성 스크립트🎜

🎜우리의 핵심은 카르마 러너를 실행시키는 것이고 Jasmine의 경우 테스트 스크립트를 작성할 때 사용되므로 , 아니요 당분간은 지나치게 걱정할 필요가 있다. 🎜🎜루트 디렉터리에 karma.conf.js 파일을 생성해야 하는데 이는 일부 규칙과 동일합니다. 이 파일은 활성화해야 할 플러그인, 로드할 테스트 스크립트, 필요한 테스트 브라우저 환경, 테스트 보고서 알림 방법, 로그 등을 Karma에 알리기 위한 것입니다. 🎜🎜🎜karma.conf.js🎜🎜🎜다음은 Angular Cli에서 기본적으로 제공하는 karma 구성 파일입니다. 🎜rrreee🎜위 구성은 기본적으로 우리의 요구 사항을 충족할 수 있습니다. 일반적으로 변경해야 할 것은 테스트 브라우저 목록입니다. Karma는 시중에 나와 있는 모든 브라우저를 지원하기 때문입니다. 또한 Travis CI 지속적 통합을 사용할 때 샌드박스 비활성화 환경을 시작하면 Chrome 브라우저를 통해 많은 것을 절약할 수 있습니다. 🎜rrreee🎜karma 구성 파일에 대한 모든 정보를 보려면 공식 웹사이트 문서 🎜. 🎜🎜🎜test.ts🎜🎜🎜karma.conf.js를 작성할 때 브라우저에서 로드한 파일이 ./src/test.ts 문서를 가리키도록 구성했습니다. . 이 기능은 Karma가 시작되도록 안내하는 것이며 코드는 훨씬 간단합니다. 🎜rrreee🎜모든 것이 준비되면 테스트 코드 없이도 Karma를 시작할 수 있습니다. 🎜🎜Angular Cli인 경우 테스트하세요. node "./node_modules/karma-cli/bin/karma" start로 토스🎜🎜🎜마지막으로 브라우저를 엽니다.http://localhost:9876에서 테스트 보고서를 볼 수 있습니다. 🎜🎜🎜🎜간단한 예제🎜🎜🎜🎜이제 환경이 설정되었으므로 간단한 예제를 작성해 보겠습니다. 🎜🎜./src/demo.spec.ts 파일을 생성하세요. 🎜.spec.ts는 접미사이므로 이를 따르세요. 🎜🎜rrreee🎜ng test를 실행한 후 콘솔에서 🎜rrreee🎜 또는 브라우저에서 🎜rrreee🎜를 볼 수 있습니다. 어쨌든 결국 우리는 Angular 단위 테스트의 세계에 들어갔습니다. . 🎜🎜🎜🎜Angular Testing Toolset🎜🎜🎜🎜Pipe 또는 Service와 같은 일반 클래스는 간단한 new를 통해서만 인스턴스를 생성하면 됩니다. 지침 및 구성 요소에는 특정 환경이 필요합니다. 이는 Angular의 모듈 개념 때문입니다. 구성 요소를 실행하려면 먼저 @NgModule 정의가 있어야 합니다. 🎜🎜도구 세트에는 많은 정보가 포함되어 있지 않으며 쉽게 익힐 수 있습니다. 아래에서는 가장 일반적으로 사용되는 몇 가지 기능을 간략하게 설명하겠습니다. 🎜🎜🎜TestBed🎜🎜🎜TestBed는 @NgModule 테스트 구축을 위한 Angular 테스트 도구 세트에서 제공됩니다. 환경 모듈. 물론 모듈을 사용하면 TestBed.createComponent를 사용하여 대상 구성 요소를 테스트하기 위한 테스트 구성 요소도 생성해야 합니다. 🎜🎜🎜Asynchronous🎜🎜🎜Asynchronous는 Angular의 모든 곳에 있으며 비동기 테스트는 async 및 fakeAsync 도구 세트를 사용하여 동기식으로 보이는 우아한 테스트 코드를 작성할 수 있습니다. 🎜🎜도구 세트에는 더 많은 도구가 있으며, 모두 [Angular 단위 테스트 - 구성 요소 및 명령 단위 테스트]()에서 하나씩 설명하겠습니다. 🎜🎜행복한 코딩하세요!🎜

위 내용은 테스트 환경을 설정하는 방법은 무엇입니까? Angular 테스트 도구 세트 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!