使用Require和Resharper进行前端javascript测试

所以我一直在试图弄清楚前端测试是如何工作的（单元测试），但我在某一点上陷入了困境

因此，我的茉莉花测试设置如下：

describe('Blabla', function () {

    it('returns true', function () {
        var people = require(["people"], function(ppl) {
            return ppl;
        });
        expect(people.getTitle()).toBe('People piolmjage');
    });
});

但运行这个程序让我：

类型错误：未定义不是函数

很明显，人是没有定义的。所以也许我回电话来的太晚了。但如果删除回调，则会出现以下错误：

it('returns true', function () {
    var people = require("people");
    expect(people.getTitle()).toBe('People piolmjage');
});

错误：尚未加载上下文的模块名“人员”：。使用require（[]）

我觉得我的设置有问题……有人知道如何让FE测试工作吗

我确实设法从控制台使用

define

并结合phantomjs和durandal测试文件使它工作，但我需要它在控制台之外工作，因此我不能使用这个

define

，因为测试运行者找不到我的测试

这就是为什么我需要使用CommonJS来获取所需的viewmodels

人物模型

define([],
function () {
    var getTitle = function() {
        return "hello";
    }

    var peopleViewModel = {
        title: 'People page',
        getTitle: getTitle
    };
    return peopleViewModel;
});

更新

我让代码正常工作，但没有使用resharper。跟着

但这让我得到了控制台输出，这是一种非结构化的方式来真正通读

但是，我可以使用define关键字，然后它就可以正常工作了。所以我假设是require关键字把事情搞砸了

更新2

所以我用小提琴来检查发生了什么。我也终于让它工作了（有点…）

我的测试文件现在如下所示：

///<reference path="../../Scripts/require.js"/>
///<reference path="../../test/lib/jasmine-2.1.3/jasmine.js"/>

///<reference path="../../App/viewmodels/people.js"/>

describe('Blabla', function () {
    it('require test', function (done) {
        require(['people'], function (people) {
            expect(people.title).toBe('People page');
            done();
        });
    });
});

正如您在这里看到的，我name我的viewmodel将成为

人

。 这适用于testrunner，但他实际上并没有通过requireJS获取任何文件，而只是通过引用路径。此外，这不符合我的需要，因为durandal型号未命名

Fiddler屏幕截图：

---

因此，他基本上不使用requireJS来获取视图模型，因此我不能只使用require.config初始值设定项来获取我的viewmodels文件夹并使用requireJS下载每个视图模型。有什么想法吗？

RequireJS提供的

require

调用本质上是异步的，因此您需要执行以下操作：

it('returns true', function (done) {
    require(["people"], function(people) {
        expect(people.getTitle()).toBe('People piolmjage');

        done(); // Signal that the test is done.
    });
});

define(['viewmodels/bla'], function (bla) {
    return {
        title: 'People page',
        bla: bla //testing dependencies on other viewmodels
    };
});

---

你在问题中的第一次尝试是行不通的。这就是经典的“试图从异步代码同步返回值”错误。第二次尝试使用

require（“人员”）

也不起作用，因为此

require

调用是伪同步的，仅当请求的模块已加载时才起作用。有关此伪同步

require

工作原理的解释，请参阅。

我终于让它工作了，花了我一天半的时间

无论如何，我不再使用resharper，或者更准确地说，它是测试运行程序。 Chutzpah是我最后求助的人。这也花了我一些研究，但我得到了它的点，它包括一切，因为我想它

以下是我所做的：

我的people.js如下所示：

it('returns true', function (done) {
    require(["people"], function(people) {
        expect(people.getTitle()).toBe('People piolmjage');

        done(); // Signal that the test is done.
    });
});

define(['viewmodels/bla'], function (bla) {
    return {
        title: 'People page',
        bla: bla //testing dependencies on other viewmodels
    };
});

然后我还做了一个bla.js

define(function() {
    return {
       bla: "bla"
    };
});

现在进行测试：

describe('Blabla', function () {
it('require test', function (done) {
    require(['viewmodels/people'], function (people) {
        expect(people.title).toBe('People page');
        done();
    });
});

it('dependency on require test', function (done) {
    require(['viewmodels/people'], function (people) {
        console.log(people.bla);
        expect(people.bla.bla).toBe('bla');
        done();
    });
});
});

最后，在阅读上面提供的链接上的答案时，我不得不创建一个Chutzpah配置文件来创建一个测试harnass：

{
   "Framework": "jasmine",
   "TestHarnessReferenceMode": "AMD",
   "TestHarnessLocationMode": "SettingsFileAdjacent",
   "References" : [
       {"Path" : "../Scripts/require.js" }, 
       {"Path" : "requireConfig.js" }
   ],
   "Tests" : [
     {"Path": "specs"}
   ]
}

现在，使用Visual studio test runner运行测试实际上可以得到我需要的一切，正如您所看到的，我现在可以通过require访问我的所有视图模型，比如：

require（['viewmodels/whateverviewmodel'，function（whateverviewmodel）{……}

我希望这个答案能让人们用茉莉花和RequireJS测试你的（Durandal）水疗

我知道我的视图模型在这个答案中，也不是在问题本身中，说了很多，但这应该让你知道如何进行所有这些

小编辑

现在，您还可以跳过测试中使用require（[]…的回调混乱，并像使用

define

构建视图模型一样构建测试

define(['viewmodels/people'], function (people) {
    describe('Blabla', function () {
        it('require test', function () {
            expect(people.title).toBe('People page');
        });

        it('dependency on require test', function () {
            console.log(people.bla);
            expect(people.bla.bla).toBe('bla');
        });
    });
});

---

这会减少缩进，并且本身更具可读性。

在您的示例中，我仍然会遇到一个错误，

people

未定义。错误：Timeout-异步回调未在jasmine.DEFAULT\u Timeout\u INTERVAL指定的超时内调用。在控制台中，它显示：getTitle（）如果您的模块实际返回了一个有用的值，您的问题中不会显示模块的代码。只要将RequireJS配置为在需要

“people”

时加载您在问题中显示的代码（而不是其他内容），那么它应该会起作用。另外，你是否复制并粘贴了我在答案中的内容？试图编辑你的原始代码以复制我在答案中的内容很容易出错。我确实编辑了我的原始代码，但没有成功……我似乎不明白他为什么没有正确地包含“人”模型