如何为 requirejs 和 qunit 设置 grunt 任务

Question

我正在尝试使用 requirejs 和 grunt-contrib-qunit 设置 QUnit 环境。

这是我的。

grunt 文件：

qunit: {
  all: {
    options: {
      urls: [
        'http://localhost:8000/qunit/qunit-test-suite.html'
      ]
    }
  }
},

connect: {
  server: {
    options: {
      port: 8000,
      base: '.'
    }
  }
},

qunit-测试-suite.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Tests Suite: travis CI Test</title>
  <link rel="stylesheet" href="../components/libs/qunit/qunit/qunit.css">
</head>
<body>

  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="../components/libs/qunit/qunit/qunit.js"></script>
  <script>
    QUnit.config.autoload = false;
    QUnit.config.autostart = false;
  </script>

  <script data-main="qunit" src="../components/libs/requirejs/require.js"></script>

</body>
</html>

qunit.js:

require.config({
    baseUrl: "../",
    paths: {
      'jquery': 'components/libs/jquery/dist/jquery.min',

      // Test for Foo
      'foo': 'components/app/foo/foo',
      'test-Foo': 'components/app/foo/test-Foo'
    },
    shim: {
     'QUnit': {
       exports: 'QUnit',
       init: function() {
         QUnit.config.autoload = false;
         QUnit.config.autostart = false;
       }
      }
    }
});

require(['test-Foo'], function (Foo) {
  QUnit.load();
  QUnit.start();
});

测试-Foo.js:

define(['foo'], function(Foo) {

  'use strict';

  module("Foo");

  test("Foo return Test", function() {
    equal(Foo.foo(), "foo", "Function should return 'foo'");
    equal(Foo.oof(), "oof", "Function should return 'oof'");
  });

  test("Bar return Test", function() {
    equal(Foo.bar(), "barz", "Function should return 'bar'");
  });

});

问题是当我在浏览器中打开 test-suite.html 时一切正常。发送到 PhantomJS 后，我收到以下错误：

Running "connect:server" (connect) task
Started connect web server on http://localhost:8000

Running "qunit:all" (qunit) task
Testing http://localhost:8000/qunit/qunit-test-suite.html

>> PhantomJS timed out, possibly due to a missing QUnit start() call.
Warning: 1/1 assertions failed (0ms) Use --force to continue.

Aborted due to warnings.

完整设置：https://github.com/markusfalk/test-travis

测试运行：https://travis-ci.org/markusfalk/test-travis

感谢您的帮助:)

Answer 1

如果我说的很明显，请提前致歉，但您是否安装了 PhantomJS？我在你的 packages.json 文件中看不到它。您可以在项目根目录中使用 npm install phantomjs --save-dev 安装它。 save-dev 会将其添加到您的 packages.json，因此当您运行 npm install 时，它会自动安装。

Answer 2

您是否尝试过使用 -v and/or -d 标志运行 grunt 来获得更详细的输出？我确实注意到在您的 travis-ci build.

中跳过了一些关于 PhantomJS 的内容

Writing location.js file

PhantomJS is already installed at /usr/local/phantomjs/bin/phantomjs.

npm WARN excluding symbolic link lib/socket.io-client.js -> io.js

如果它依赖于 io.js 而 link 不存在，它将失败。

更新：我使用详细输出发现了问题。由于文件名问题，您的测试是 404ing。

["phantomjs","onResourceReceived",{"contentType":"text/html; charset=utf-8","headers":[{"name":"X-Content-Type-Options","value":"nosniff"},{"name":"Content-Type","value":"text/html; charset=utf-8"},{"name":"Content-Length","value":"43"},{"name":"Date","value":"Fri, 10 Apr 2015 06:45:47 GMT"},{"name":"Connection","value":"keep-alive"}],"id":6,"redirectURL":null,"stage":"end","status":404,"statusText":"Not Found","time":"2015-04-10T06:45:47.747Z","url":"http://localhost:10000/components/app/foo/test-Foo.js"}]

您正在尝试使用文件 test-Foo.js。该文件在您的存储库中名为 test-foo.js。更改大小写应该可以修复测试。

Answer 3

在 Jörn 的帮助下，我想出了一个可行的设置。技巧是在 QUnit 加载之前设置 requireJS（将 requireJS 配置移动到 config.js 并首先加载它）。

要求：

grunt-contrib-qunit v0.7.0
qunit v1.18.0

HTML 测试套件：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>QUnit Tests Suite: asdf</title>
    <link rel="stylesheet" href="../components/libs/qunit/qunit/qunit.css">
  </head>
  <body>

    <div id="qunit"></div>
    <div id="qunit-fixture"></div>

    <script src="config.js"></script>
    <script data-main="unit" src="../components/libs/requirejs/require.js"></script>

  </body>
</html>

config.js

var requirejs = {
  baseUrl: "../",
  paths: {
    //{{app}}
    'foo': 'components/app/foo/foo',
    'test-foo': 'components/app/foo/test-foo',

    //{{libs}}
    'unit': 'qunit/unit',
    'qunit': 'components/libs/qunit/qunit/qunit',
    'jquery.exists': 'libs/jquery.exists/jquery.exists',
    'jquery': 'components/libs/jquery/dist/jquery.min'
  },
  'shim': {
    'jquery.exists': ['jquery']
  }
};

unit.js

require([
  'qunit',
  'test-foo'
],
function(qunit, TestFoo) {
  TestFoo();
  qunit.start();
});

测试-foo.js:

define(['jquery', 'qunit', 'foo'], function($, qunit, Foo) {
  'use strict';
  return function() {
    qunit.module("Foo");
    qunit.test("Foo Test", function() {
      equal(Foo.saySomething(), "Hello", "returns 'Hello'");
    });
  };
});

最后是我要测试的模块：

define(['jquery'], function($) {
  'use strict';
  var Foo = {
    saySomething: function() {
      return "Hello";
    }
  };
  return {
    saySomething: Foo.saySomething
  };
});

如何为 requirejs 和 qunit 设置 grunt 任务

How to setup grunt task for requirejs and qunit

javascript

requirejs

phantomjs

qunit

grunt-contrib-qunit