如何使用 Mocha 测试 Angular 2？

Posted 2023-02-19

【中文标题】如何使用 Mocha 测试 Angular 2？

【英文标题】：How does one test Angular 2 with Mocha?

【发布时间】：2016-04-22 02:36:44

【问题描述】：

几天来我一直在努力解决这个问题，但就是无处可去。我正在尝试使用 Mocha 来测试我的 Angular 2 应用程序（如果重要，则基于 SystemJS），我只是不知道如何获取控制器实例。

我正在尝试我能想到的最简单的情况；

import bootstrap from 'angular2/platform/browser';
import App from '../app/app';
import Type from 'angular2/core';

describe('Login', () => 
    let app:App;

    beforeEach((done) => 
        console.log(bootstrap);
        bootstrap(<Type>App)
            .then(result => result.instance)
            .then(instance => 
                app = instance;
                done();
            );
    );

    it('Test for App to Exist', (done) => 
        console.log(app);
        done();
    );
);

据我所知，console.log(bootstrap) 以某种方式失败了，因为我的 gulp-mocha 任务（默默地）死了。注释掉引导引用以进行虚拟测试；

import bootstrap from 'angular2/platform/browser';
import App from '../app/app';
import Type from 'angular2/core';

describe('Login', () => 
    let app:App;

    beforeEach((done) => 
        done();
    );

    it('Test for App to Exist', (done) => 
        console.log(app);
        done();
    );
);

按照我的预期记录undefined。有没有人设法让这样的事情起作用？这里的目标是对控制器进行单元测试，所以我非常努力地避免 phantomJS/webdriver/etc。

【参考方案1】：

我认为 mocha 不能直接使用，因为它仅在节点上运行（当您仅在服务器端呈现 html 字符串时，也许使用 Angular2 通用）。话虽如此，您可以使用mochify，它是 mocha 和 browserify 在后台使用。我正在为该设置使用example project。

然后测试可能看起来像这样：

// import everything needed for to run Angular (we're running in PhantomJS by defualt but other browsers are possible too)
import "es6-shim";
import "es6-promise";
import "zone.js";
import "rxjs";
import "reflect-metadata";

import "../../typings/browser.d.ts";

import Injector, enableProdMode from "angular2/core";
import HTTP_PROVIDERS from "angular2/http";


// import stuff we need to instantiate component
import GithubComponent from "./gihub-component";
import GithubService from "./github-service";
import Config from "../config";

import * as sinon from "sinon";

enableProdMode();

describe("github-component", () => 

    let injector: Injector;
    let component: any;
    let service: any;

    beforeEach(() => 
        // instantiate Angular 2 DI context
        injector = Injector.resolveAndCreate([
            HTTP_PROVIDERS,
            GithubComponent,
            GithubService,
            Config
        ]);
        component = injector.get(GithubComponent);
        service = injector.get(GithubService);
        sinon.spy(service, "getRepos");
    );

    afterEach(() => 
        service.getRepos.restore();
    );

    it("searches for repository", () => 
        component.query.updateValue("test");

        return setTimeout(() => 
            sinon.assert.calledOnce(service.getRepos);
            sinon.assert.calledWith(service.getRepos, "test");
        , 300);
    );

);