ReferenceError：找不到变量：require - Angular 2 RC4 Karma Jasmine PhantomJS，-Java 学习之路

我已经设法达到一个点，我有一个概念验证工作应用程序，具有以下设置

ASP.NET Core Angular 2 rc4

该应用程序工作正常，所有Angular 2位都正常工作 .

然后我添加了Karma Jasmine，以便在编写任何严肃的业务代码之前开始使用Angular 2的TDD，即

http://blog.rangle.io/testing-angular-2-applications/

我的问题是Karma Jasmine（PhantomJS） .

当我在没有使用Angular 2的东西的情况下在TypeScript中编写测试时，Karma Jasmine工作正常，在控制台我得到了传递或失败测试的列表 .

但是，我最近为使用服务的Angular 2组件编写了一个单元测试 . 在单元测试中，我模拟了服务 .

现在，Karma Jasmine PhantomJS输出到控制台

INFO [业力]：Karma v1.1.2服务器开始于......

INFO [launcher]：启动具有无限并发性的浏览器PhantomJS

INFO [launcher]：启动浏览器PhantomJS

INFO [PhantomJS 2.1.1（Windows 7 0.0.0）]：连接在套接字上

PhantomJS 2.1.1（Windows 7 0.0.0）错误 ReferenceError: Can't find variable: require 在wwwroot / js / tests / quote / quote.component.spec.js：2

当我查看转换代码的单元测试的最小版本时，我只是尝试让Angular 2注册提供程序来创建模拟而没有别的

"use strict";
var testing_1 = require("@angular/core/testing");
var quote_service_ts_1 = require("../../app/quote/quote.service.ts");
var MockQuoteService = (function () {
    function MockQuoteService() {
        this.quote = "Quote from the mocked test QuoteService";
    }
    MockQuoteService.prototype.getQuote = function () {
        return this.quote;
    };
    return MockQuoteService;
}());
describe("Test Quote Component", function () {
    var builder;
    beforeEach(function () {
        testing_1.addProviders([
            { QuoteService: quote_service_ts_1.QuoteService, useClass: MockQuoteService },
        ]);
    });

    it("should pass", function () { return expect(false).toEqual(false); });
    it("should fail", function () { return expect(false).toEqual(true); });
});

我看到PhantomJS陷入困境的那一刻

var testing_1 = require("@angular/core/testing");

我的tsconfig .

{
"compileOnSave": false,
"compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "./wwwroot/js"       
},
"exclude": [
    "node_modules",
    "wwwroot",
    "typings",
    "typings/globals",
    "typings/modules",
    "typings/index.d.ts"
]

}

我指示TypeScript转换为ES5，我认为这就是为什么上面的单元测试在Angular 2进入图片时使用 require 对象的原因 . 单元测试的打字稿如下 .

import {
    inject,
    // async,
    addProviders,
    // fakeAsync,
    // tick,
    ComponentFixture,
    TestComponentBuilder,
} from "@angular/core/testing";
import {QuoteComponent} from "../../app/quote/quote.component.ts";
import {QuoteService} from "../../app/quote/quote.service.ts";

class MockQuoteService {

    public quote: string = "Quote from the mocked test QuoteService";

    public getQuote() {
        return this.quote;
    }
}

describe("Test Quote Component", function () {

    let builder: TestComponentBuilder;

    beforeEach(() => {
        addProviders([
            { QuoteService, useClass: MockQuoteService },
        ]);
    });
it("should pass",
        () => expect(false).toEqual(false)
    );

    it("should fail",
        () => expect(false).toEqual(true)
    );

});

这是我的karma.conf.js

// Karma configuration
// Generated on Thu Aug 04 2016 15:44:51 GMT+0100 (GMT Daylight Time)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
     "wwwroot/js/tests/**/*.js"
    ],


    // list of files to exclude
    exclude: [
      '**/*.swp'
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    //browsers: ['Chrome'],
    browsers: ['PhantomJS'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

PhantomJS找不到要求 - 好吧我明白了 .

如何通过Karma告诉PhantomJS在哪里找到“require”？

我应该安装类似的东西

卡玛 - requirejs

然后按照类似的方式

https://karma-runner.github.io/0.13/plus/requirejs.html？

我说得对吗？

我是否正确地将Angular 2 RC4与Karma Jasmine PhantomJS（或其他浏览器）和TDD一起使用？

上面的单元测试是否转换为参考所需的JavaScript是正确的吗？

坦率地说，我对整个事情应该如何正确设置和协同工作感到有点困惑，因为我没有一个明确的配方可供我复制 . 我一步一步地试错，并试着找出事情，因为我一步一步地使用尽可能少的工作来完成工作 .

最后一件事 . 假设告诉PhantomJS在哪里找到requirejs是可以的，我怀疑karma.config.js应该变成类似下面的东西

// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', 'requirejs'],


// list of files / patterns to load in the browser
files: [
 ....some angular 2 references from the node_modules\@angular ????
 "wwwroot/js/tests/**/*.js"
],

它是否正确？

我需要什么引用node_modules \ @angular（Angualr 2 rc4）？

非常感谢你

ReferenceError：找不到变量：require - Angular 2 RC4 Karma Jasmine PhantomJS，

相关问题