【问题标题】:How to connect Backbone, Mocha, Chai, Require.js and Sinon如何连接 Backbone、Mocha、Chai、Require.js 和 Sinon
【发布时间】:2016-08-04 03:39:00
【问题描述】:

我目前正在尝试基于 Backbone 为我的应用设置测试环境。我想对一些功能进行单元测试。但我不得不承认我在连接不同的组件时遇到了问题。我正在使用 Backbone、Mocha、Chai、expect.js、require.js 和 Sinon。该应用程序基本上是前一段时间使用 Yeoman 设置的。我现在建立的是(基于我非常喜欢的这个教程:https://puigcerber.com/2013/12/23/using-grunt-to-run-mocha-tests-with-backbone-js-and-requirejs/

在我的根目录下,我有一个名为 test 的文件夹,其中包含:

我的 index.html:

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Mocha Spec Runner</title>
    <link rel="stylesheet"     href="../app/ressources/bower_components/mocha/mocha.css">
</head>
<body>
<div id="mocha"> </div>

<script src="../node_modules/sinon-1.17.3.js"></script>
<script src="../app/ressources/bower_components/mocha/mocha.js"></script>
<script>mocha.setup('bdd')</script>
<script src="../app/ressources/bower_components/chai/chai.js"></script>
<script>var expect = chai.expect</script>

<script data-main="spec/runner" src="../app/ressources/bower_components/requirejs/require.js"></script>
</body>
</html>

还有一个名为spec的文件夹,包括:

我的 runner.js:

'use strict';
require.config({
baseUrl: '../app/',
paths: {
    jquery: 'ressources/bower_components/jquery/jquery',
    backbone: 'ressources/bower_components/backbone/backbone',
    underscore: 'ressources/bower_components/underscore/underscore',
    text: 'ressources/bower_components/text/text',
    deepmodel: 'ressources/bower_components/backbone-deep-model/distribution/deep-model.min'
},
shim: {
    underscore: {
        exports: '_'
    },
    jquery: {
        exports: '$'
    },
    backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    }
}
});

var specs = [
   'spec/test.js'
];

require(specs, function() {

if (window.mochaPhantomJS) {
    mochaPhantomJS.run();
}
else {
    mocha.run();
}
});

还有我的 test.js:

'use strict';
define(function(require) {
var ExamplesCollection = require('collections/OrganisationsCollection');

describe('Examples collection', function() {

    var examples = new OrganisationCollection();

    it('should exist', function() {
        expect(examples).to.exist;
    });

    it('should be an instance of Examples collection', function() {
        expect(examples).to.be.an.instanceof(OrganisationsCollection);
    });

});

});

test.js 真的只是一个测试,我真正想做的是:

beforeEach(function() {

    this.server = sinon.fakeServer.create();
    this.Organisations = new OrganisationsCollection({id:7, name:'somestring’});
    var searchString = 'test';
    this.responseBody  = '[{"id":7,"name":"somestring"}]';

    this.server.respondWith("GET", ‘myUrl’,
    [200, {"Content-Type": "application/json"},this.responseBody]);
    });


afterEach(function() {
    this.server.restore();
});


it('should return full list, function () {

    var fetchSpy = sinon.spy(this.Organisations, "fetch");
     this.Organisations.fetch();
     this.server.respond();
     var response = fetchSpy.getCall(0).returnValue.responseText;
     response.should.equal(this.responseBody);

   });

我只是想测试一下 Collection fetch 是否正常工作。我考虑过模拟服务,它在函数中调用 fetch,但我没有找到这样做的可能性。所以我想伪造 sinon 服务器来检查我的 fetch。

我总是遇到无法实例化我的服务的问题,即调用集合的地方,这使得无法进行测试。

很遗憾,没有什么是真正有效的。

我得到 2 种错误:

当我在控制台上使用 grunt 开始测试时,我收到错误:警告:PhantomJS 超时,可能是由于缺少 Mocha run() 调用。使用 --force 继续

我得到了这个,因为我正在使用 runner.js 文件。当我直接在索引中调用 mocha.run() 时,我没有遇到这个问题,但是一些关于 require.js 的其他问题。

另一个问题是当我在浏览器中调用我的测试时。那里我得到不同的错误:

ReferenceError: OrganisationCollection 未定义 (test.js)

还有一些关于我在 runner.js 中的路径加载的错误

所以我的所有组件都没有协同工作。我用谷歌搜索了几天并尝试了很多方法,但没有一个对我有用。

我不得不说我对这个话题真的很陌生,如果有人可以帮助我,我会非常高兴。

【问题讨论】:

  • “我总是遇到无法实例化我的服务的问题” - 实例化服务是什么意思?由于路径错误,您会收到参考错误。你检查文件路径有什么问题吗?
  • 我建议你分手。首先尝试运行一个非常简单的测试,例如检查是否定义了视图,它不需要任何虚假服务。如果您对此有疑问,请就此提出问题,将 sinon 和其他东西排除在外。一旦你让它工作,然后尝试设置 sinon。如果您遇到问题,请解释工作设置以及您如何尝试在新问题中设置 sinon。如果您在此过程中在特定环境中遇到错误,请解释您当前的工作设置并询问为什么它无法在其他环境中工作
  • 我的服务是模块,我调用函数的地方,我要测试。要调用该函数,我必须以某种方式在我的测试中实例化该服务,对吧?服务的文件路径是绝对正确的,所以不知道是哪里出了问题。
  • 到你的第二篇文章:我运行了一个简单的测试,但是当我想使用 Sinon 时,我不得不从在我的索引中调用 Mocha 切换到 runner.js,这样我就可以包含我需要的一切(我认为与require.js有关)。从那里开始,什么都没有了。你知道为什么吗?

标签: backbone.js requirejs mocha.js sinon chai


【解决方案1】:

我终于知道了,问题出在哪里:其实问题出在我的 Gruntfile.js 上:

  test: {
            options: {
                port: 9001,
                base: [
                    'node_modules',
                    '.tmp',
                    'test',
                    '<%= projectFolders.app %>'
                ]
            }
        },

我没有使用正确的路径,所以我的要求必须如下所示:

jquery: 'ressources/bower_components/jquery/jquery'

因为我已经在 app 文件夹中了。

第二个错误也在 Gruntfile.js 中:

  mocha: {
        all: {
            options: {
                log: true,
                urls: ['http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html']
            }
        }
    }

我确实删除了 run:true。

从现在开始,这些组件可以完美地协同工作。

【讨论】:

    猜你喜欢
    • 2020-08-20
    • 2015-12-01
    • 1970-01-01
    • 2017-10-08
    • 2023-04-11
    • 2018-04-08
    • 1970-01-01
    • 1970-01-01
    • 2017-10-23
    相关资源
    最近更新 更多