3

testr.jsを使用してRequireJS の依存関係をモックすることで、起動して実行するのに少し問題があります。次のディレクトリ構造があります。

<root>
  |-- Scripts
  |    |-- lib
  |    |    +-- require.js
  |    +-- modules
  |         |-- dependency.js
  |         +-- testable-thing.js
  |-- Test
  |    |-- lib
  |    |    +-- testr.js
  |    +-- index.html
  +-- index.html

この場合のテスト対象のシステムは でtestable-thing.js、testr を使用して切り替えたい依存関係は ですdependency.js。ソースコードは次のとおりです。

// testable-thing.js
define(["scripts/modules/dependency"], function (dep) {
    console.log("testable thing loaded");
});

// dependency.js
define(function () {
    console.log("dependency loaded");
});

http://<root>/index.html（以下のソース）を使用してリクエストすると、require-config.jsこれは正常に機能し、コンソールにログが記録されます。

js を正しくロードする必要があることを示す画像

http://<root>/test/index.htmlまた、完全なアプリで JavaScript 単体テストを実行するエントリ ポイントもあります。次のようになります。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="/scripts/lib/require.js"></script>
    <script src="/test/lib/testr.js"></script>
</head>
<body>
    <script>

        testr.config({
            root: "../"
        });

        testr.run("/scripts/require-config.js", function () {
            console.log("entering tests");

            var sut = testr("modules/testable-thing", {
                "modules/dependency": function () {
                    console.log("stub loaded");
                }
            });
        });
    </script>
</body>
</html>

そして、これは私が問題を抱えているところです。次の出力が得られます。

モジュール バインディングが testr で表示されている画像

これで、testr.js が RequireJS のrequireメソッドを上書きして、ロードされているモジュールを登録し、関数に渡されたスタブ/モックでそれらを上書きすることを理解しましtestrたが、これらの依存関係を「ロード」する方法を一生試してみることはできません。testr.runコールバック ルーチンを変更しtest/index.htmlて、依存関係を読み込むものを含めると、次のようになります。

testr.run("/scripts/require-config.js", function () {
    console.log("entering tests");

    require(["modules/testable-thing"], function () { });

    var sut = testr("modules/testable-thing", {
        "modules/dependency": function () {
            console.log("stub loaded");
        }
    });
});

次に、これが起こります：

事前にモジュールをロードしようとしている画像はさらに奇妙です

entering testsここで が 2 回印刷される理由がよくわかりません。ソース コードのその 1 か所にのみ表示されます。

これが私<root>/index.htmlと私のもの<root>/scripts/require-config.jsです：

// <root>/index.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="/scripts/lib/require.js" data-main="/scripts/require-config.js"></script>
</head>
<body>
<script>
require(["modules/testable-thing"], function (testableThing) {
});
</script>
</body>
</html>

// <root>/scripts/require-config.js

require.config({
    baseUrl: "/scripts"
});

これらの依存関係をモックして起動するにはどうすればよいですか? リクエストするとき、<root>/test/index.html私は見たい：

entering tests
stub loaded
testable thing loaded

Chrome コンソールで。

4

1 に答える 1

1

一つ、ちょっと間違っていました。でhttp://<root>/tests/index.html：

require(["modules/testable-thing"], function () {
    console.log("entering tests");

    var sut = testr("modules/testable-thing", {
        "modules/dependency":  {
            run: function () {
                console.log("stub loaded");
            }
        }
    });
});

コールバックが に渡されると、テストがどのように実行されるかに注意してくださいrequire()。 これには、Boilerplatejs の寄稿者である Janith によるこの記事が役立ちました。

さらに、現在のバージョンの testr にはバグがあるようです。最新 ( 1.3.2 ) を使用すると、次の出力が得られます。

ここに画像の説明を入力

一方、1.0.2 (Boilerplatejs が使用するもの) を使用すると成功します。

ここに画像の説明を入力

今晩、さらに調査を行い、これがどうなっているのかを確認します。

于 2013-09-22T21:47:43.460 に答える