使用 QUnit、Grunt 和 RequireJS 进行单元测试答案

【问题标题】：Unit testing with QUnit, Grunt and RequireJS使用 QUnit、Grunt 和 RequireJS 进行单元测试
【发布时间】：2014-01-08 15:44:19
【问题描述】：

我试图让我的单元测试在 Grunt 中工作，当我在浏览器中执行我的索引文件时，测试运行成功，但是当我使用 grunt qunit 运行测试时，它无法识别任何测试。

我确信这取决于我执行测试的方式，例如我只包括：

<script>
test('Always Fail', function() {
    equal(5, 2, 'The return should be 2.');
});
</script>

在我的 index.html 测试页面的头部，然后运行 Grunt 我可以看到这个测试失败。但是我正在尝试使用 requireJS 加载我的测试，正如我所说的那样，它在浏览器中工作。

我的 index.html 文件如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Unit Testing</title>
  <link rel="stylesheet" href="qunit/qunit.css">
  <script data-main="../unittests" src="../lib/require.js"></script>
  <script src="qunit/qunit.js"></script>
  <script>
    test('Always Fail', function() {
        equal(5, 2, 'The return should be 2.');
    });
  </script>
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
</body>
</html>

我假设是这一行：

<script data-main="../unittests" src="../lib/require.js"></script>

这是导致问题的原因，并且没有加载 grunt。

我的 unittests.js 文件如下所示：

require.config({
  paths: {
      'QUnit': 'test/qunit/qunit'
  },
  shim: {
     'QUnit': {
         exports: 'QUnit',
         init: function() {
             QUnit.config.autoload = false;
             QUnit.config.autostart = false;
         }
     } 
  }
});

// require the unit tests.
require(
  ['QUnit', 'test/dummyTest'],
  function(QUnit, dummyTest) {
      // run the tests.
      dummyTest.run();
      // start QUnit.
      QUnit.load();
      QUnit.start();
  }
);

这是我的 gruntfile：

module.exports = function(grunt) {

  // use grunt 
  var nocompress, optimize;

  nocompress = grunt.option('nocompress') || false;

  if(nocompress) {
    optimize = 'none';
  } else {
    optimize = 'uglify';
  }

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    requirejs: {
      compile: {
        options: {
          appDir: "dev/",
          baseUrl: "js",
          mainConfigFile: "dev/js/bootstrap.js",
          dir: "www",
          optimize: optimize,
          modules: [
            {
              name: "app"
            }
          ]
        }
      }
    },
    qunit: {
      all: ['dev/js/test/**/*.html']
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        eqnull: true,
        browser: true,
        globals: {
          jQuery: true
        },
      },
      uses_defaults: [
        'dev/js/collections/*.js',
        'dev/js/models/*.js',
        'dev/js/views/*.js',
        'dev/js/*.js', ]
    }
  });

  // Load plugins
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-requirejs');

  // Default task(s).
  grunt.registerTask('build-and-qunit', ['default', 'qunit']);
  grunt.registerTask('default', ['jshint', 'requirejs']);

};

【问题讨论】：

您应该在问题中包含 Gruntfile 的相关部分，或者更好的是，包含足以重现您遇到的问题的整个 Gruntfile。

标签： unit-testing requirejs gruntjs qunit

【解决方案1】：

我使用类似于以下结构的结构取得了一些成功： https://github.com/jonnyreeves/qunit-require

禁止 QUnit 自动运行。
需要所有依赖项。
运行 QUnit。

【讨论】：

感谢您将其分解为这几个步骤，非常重要！！