Question

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

所以我的茉莉花测试设置如下：

describe('Blabla', function () {

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

但是运行这个让我：

TypeError：undefined不是功能

很明显，人们是未定义的。所以也许我的回调来得太晚了。但如果我删除回调，我会得到以下错误：

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

错误：尚未为上下文加载模块名称“people”：_。使用require（[]）

我认为我的设置有问题...任何人都知道如何让这个FE测试工作？

我确实设法让它从控制台工作并使用define结合phantomjs和durandal测试文件但是我需要这个在控制台之外工作，因此我不能使用这个define因为测试运动员不会找到我的测试。

这就是为什么我需要使用CommonJS获得所需的视图模型。

人物模型

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

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

更新

我的代码正常工作，但不与resharper。关注this page from the durandal webpage。

但这会让我获得控制台输出，这是非结构化实际读取的方式。

但我可以使用 define 关键字，然后它可以正常工作。所以我认为这是 require 关键字，我搞砸了什么？

更新2

所以我用fiddler来检查发生了什么。我终于让它工作了（有点......）。

我的testfile现在看起来像这样：

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

然后我更改了people文件：

define("people", ["bla"], function (bla) {
    return {
        title: 'People page',
        bla: bla
    };
});

正如您在此处所见，我将命名为我的视图模型people。这适用于测试人员，但他实际上并没有通过 requireJS 获取任何文件，而只是参考路径。这也不符合我的需要，因为durandal模型未命名。

Fiddler截图：

Fiddler screenshot

所以基本上他没有使用 requireJS 来获取视图模型，因此我不能只使用 require.config 初始化程序来访问我的 viewmodels 文件夹并使用requireJS下载每个viewmodel。有什么想法吗？

Answer 1

我终于开始工作，把我当成了一天半。

无论如何我不再使用resharper，或者它的测试运行者更精确。 Chutzpah 是我最后转向的那个。这也让我接受了一些研究，但我得到了它包含我想要的一切。

Check this post for sure

这是我做的：

我的 people.js 看起来像这样：

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测试跑步者运行测试实际上可以获得我需要的一切，正如您所看到的，我现在可以通过需要这样访问所有 viewmodels ：require(['viewmodels/whateverviewmodel'], function(whateverviewmodel){....})

我希望这个答案可以让人们使用Jasmine和RequireJS来测试你的（Durandal）SPA。

我知道我的观点模型在这个答案中，也不是问题本身，说得多，但这应该让你知道如何解决所有这些问题。

小编辑

你现在也可以跳过回调混乱，在测试中使用 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'); }); }); });

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

Answer 2

RequireJS提供的require调用固有异步，因此您需要执行以下操作：

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

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

您在问题中显示的第一次尝试无效。这是经典的＆＃34;试图同步返回值形成异步代码＆＃34;错误。使用require("people")的第二次尝试不起作用，因为此require调用是伪同步的，并且只有在请求的模块已加载时才会起作用。有关此伪同步require如何工作的说明，请参阅this answer。

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

2 个答案: