Question

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

这就是我所拥有的。

gruntfile：

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

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

要求：

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

HTML测试套件：

root
  expanded (observable value)
  toggleExpanded (method)
  matches (observable array)
    match (object)
    match (object)
    match (object)

config.js

<!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>

unit.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']
  }
};

测试foo.js：

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

最后我要测试的模块：

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'");
    });
  };
});

Answer 2

您是否尝试使用-v和/或-d标志运行grunt以获得更详细的输出？我注意到你的travis-ci构建中有关于PhantomJS的内容被忽略了。

编写location.js文件

PhantomJS已安装在/ usr / local / phantomjs / bin / phantomjs。

npm WARN，不包括符号链接lib / socket.io-client.js - ＆gt; io.js

如果它依赖于io.js且链接不存在，则会失败。

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

[“phantomjs”，“onResourceReceived”，{“contentType”：“text / html; charset = utf-8”，“headers”：[{“name”：“X-Content-Type-Options”，“值“：”nosniff“}，{”name“：”Content-Type“，”value“：”text / html; charset = utf-8“}，{”name“：”Content-Length“，”value“ ：“43”}，{“name”：“Date”，“value”：“Fri，2015年4月10日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

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

如何为requirejs和qunit设置grunt任务

3 个答案: