让 requirejs 与 Jasmine 一起工作

时间：2023-05-01

本文介绍了让 requirejs 与 Jasmine 一起工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我首先想说的是，我是 RequireJS 的新手，甚至是 Jasmine 的新手.

I first want to say that I am new to RequireJS and even newer to Jasmine.

我在使用 SpecRunner 时遇到了一些问题，需要 JS.我一直在关注 Uzi Kilon 和 Ben Nadel(以及其他一些人)的教程，他们帮助了一些人，但我仍然遇到一些问题.

I am having some issues with the SpecRunner and require JS. I have been following the tutorials of Uzi Kilon and Ben Nadel (along with some others) and they helped some but I am still having some issues.

似乎，如果在测试中出现错误(我能想到一个特别是类型错误)，规范运行器 html 将显示.这告诉我我在 javascript 中有一些问题.但是，在我修复了这些错误之后，不再显示 HTML.我根本无法显示测试运行器.有人能发现我的代码有什么问题会导致这个问题吗?

It seems that, if there is an error that is thrown in the test (I can think of one in particular, a type error) the spec runner html will display. This tells me that I have some issues in the javascript. However, after I fix those error no HTML is displayed anymore. I cannot get the test runner to display at all. Can someone find something wrong with my code that would cause this issue?

这是我的目录结构:

Root 
|-> lib
    |-> jasmine
        |-> lib (contains all of the jasmine lib)
        |-> spec
        |-> src
    |-> jquery (jquery js file)
    |-> require (require js file) 
index.html (spec runner) specRunner.js

这里是 SpecRunner (index) HTML:

<!doctype html>
<html lang="en">
    <head>
        <title>Javascript Tests</title>

        <link rel="stylesheet" href="lib/jasmine/lib/jasmine.css">

        <script src="lib/jasmine/lib/jasmine.js"></script>
        <script src="lib/jasmine/lib/jasmine-html.js"></script>
        <script src="lib/jquery/jquery.js"></script>
        <script data-main="specRunner" src="lib/require/require.js"></script>

        <script>
            require({ paths: { spec: "lib/jasmine/spec" } }, [
                    // Pull in all your modules containing unit tests here.
                    "spec/notepadSpec"
                ], function () {
                    jasmine.getEnv().addReporter(new jasmine.HtmlReporter());
                    jasmine.getEnv().execute();
                });
        </script>

    </head>

<body>
</body>
</html>

这里是 specRunner.js (config)

require.config({
    urlArgs: 'cb=' + Math.random(),
    paths: {
        jquery: 'lib/jquery',
        jasmine: 'lib/jasmine/lib/jasmine',
        'jasmine-html': 'lib/jasmine/lib/jasmine-html',
        spec: 'lib/jasmine/spec/'
    },
    shim: {
        jasmine: {
            exports: 'jasmine'
        },
        'jasmine-html': {
            deps: ['jasmine'],
            exports: 'jasmine'
        }
    }
});

这是一个规范:

require(["../lib/jasmine/src/notepad"], function (notepad) {
    describe("returns titles", function() {
        expect(notepad.noteTitles()).toEqual("");


    });
});

记事本来源:

define(['lib/jasmine/src/note'], function (note) {

    var notes = [
        new note('pick up the kids', 'dont forget to pick  up the kids'),
        new note('get milk', 'we need two gallons of milk')
    ];


    return {
        noteTitles: function () {
            var val;

            for (var i = 0, ii = notes.length; i < ii; i++) {
                //alert(notes[i].title);
                val += notes[i].title + ' ';
            }

            return val;
        }
    };
});

以及注释来源(JIC):

And the Note source (JIC):

define(function (){
    var note = function(title, content) {
        this.title = title;
        this.content = content;
    };

    return note;
});

我已确保就应用而言，路径是正确的.一旦我完成这项工作，我就可以配置这些路径，这样它就不会那么糟糕了.

I have made sure that, as far as the app is concerned, the paths are correct. Once I get this working I can play with configuring that paths so that it isn't so yucky.

推荐答案

我设法通过一些试验和错误来解决这个问题.主要问题是，当您编写规范时，它不是您要创建的要求，而是要使用定义:

I managed to get this working with some trial and error. The main issue was that when you write specs it isn't a require that you want to create, you want to use define:

原文:

require(["/lib/jasmine/src/notepad"], function (notepad) {
    describe("returns titles", function() {
        expect(notepad.noteTitles()).toEqual("pick up the kids get milk");


    });
});

工作:

define(["lib/jasmine/src/notepad"], function (notepad) {
    describe("returns titles", function () {

        it("something", function() {

            expect(notepad.noteTitles()).toEqual("pick up the kids get milk ");
        });

    });
});

在做了一些研究之后，很明显，当使用 RequireJS 时，任何你想要 require() 使用的东西都必须包含在一个定义中(我猜现在看起来很明显).您可以看到，在 specRunner.js 文件中，执行测试时使用了 require(因此需要定义"规范.

After doing some research it became clear that, when using RequireJS, Anything that you want the require() to use must be wrapped in a define (seems obvious now I guess). You can see that, in the specRunner.js file, a require is used when executing the tests (therefore the need to "define" the specs.

另一个问题是，在创建规范时，describe() 和 it() 是必需的(不仅仅是我在发布的示例中的描述).

The other issue is that, when creating specs, the describe() AND the it() are necessary (not just the describe like I had in the posted example).

原文:

describe("returns titles", function() {
        expect(notepad.noteTitles()).toEqual("pick up the kids get milk");


    });

工作:

describe("returns titles", function () {

        it("something", function() {

            expect(notepad.noteTitles()).toEqual("pick up the kids get milk ");
        });

    });

我也改变了测试运行器所在的位置，但这是一个重构，并没有改变测试的结果.

I also changed around where the test runner exists but this was a refactor and did not change the outcome of the tests.

再次，这里是文件和更改:

Again, here are the files and the changed:

note.js:保持不变

notepad.js:保持不变

index.html:

<!doctype html>
<html lang="en">
    <head>
        <title>Javascript Tests</title>
        <link rel="stylesheet" href="lib/jasmine/lib/jasmine.css">
        <script data-main="specRunner" src="lib/require/require.js"></script>
    </head>

    <body>
    </body>
</html>

specRunner.js:

require.config({
    urlArgs: 'cb=' + Math.random(),
    paths: {
        jquery: 'lib/jquery',
        'jasmine': 'lib/jasmine/lib/jasmine',
        'jasmine-html': 'lib/jasmine/lib/jasmine-html',
        spec: 'lib/jasmine/spec/'
    },
    shim: {
        jasmine: {
            exports: 'jasmine'
        },
        'jasmine-html': {
            deps: ['jasmine'],
            exports: 'jasmine'
        }
    }
});


require(['jquery', 'jasmine-html'], function ($, jasmine) {

    var jasmineEnv = jasmine.getEnv();
    jasmineEnv.updateInterval = 1000;

    var htmlReporter = new jasmine.HtmlReporter();

    jasmineEnv.addReporter(htmlReporter);

    jasmineEnv.specFilter = function (spec) {
        return htmlReporter.specFilter(spec);
    };

    var specs = [];

    specs.push('lib/jasmine/spec/notepadSpec');



    $(function () {
        require(specs, function (spec) {
            jasmineEnv.execute();
        });
    });

});

notepadSpec.js:

define(["lib/jasmine/src/notepad"], function (notepad) {
    describe("returns titles", function () {

        it("something", function() {

            expect(notepad.noteTitles()).toEqual("pick up the kids get milk");
        });

    });
});

这篇关于让 requirejs 与 Jasmine 一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

上一篇：如何使用 jasmine 监视 getter 属性? 下一篇：Jasmine - 在构造函数中监视方法调用

让 requirejs 与 Jasmine 一起工作

问题描述

推荐答案

相关文章

最新文章