如何为requirejs和qunit设置grunt任务

How to setup grunt task for requirejs and qunit

本文关键字：设置 grunt 任务 qunit requirejs      更新时间：2023-09-26

我正试图使用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-test-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();
});

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

感谢您的帮助：）

在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();
});

test-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
  };
});

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

正在写入location.js文件

PhantomJS已经安装在/usr/local/fintomjs/bin/PhantomJS中。

npm WARN不包括符号链接lib/socket.io-client.js->io.js

如果它依赖于io.js，而链接不在那里，它就会失败。

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

["phantomjs"，"onResourceReceived"，｛"contentType"："text/html；charset=utf-8"，"headers"：[｛"name"："X-Content-Type-Options"，："keep-alive"}]，"id"：6，"redirectURL"：null，"stage"："end"，"status"：404，"statusText"："未找到"，"时间"："2015-04-10T06:45:47.747Z"，"url"：http://localhost:10000/components/app/foo/test-Foo.js"}]

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

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

相关文章：