使用QUnit,Grunt和RequireJS进行单元测试

Ian*_*son 8 unit-testing qunit requirejs gruntjs

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

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

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

在我的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>
Run Code Online (Sandbox Code Playgroud)

我假设它是这条线:

<script data-main="../unittests" src="../lib/require.js"></script>
Run Code Online (Sandbox Code Playgroud)

这导致了问题而没有加载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();
  }
);
Run Code Online (Sandbox Code Playgroud)

这是我的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']);

};
Run Code Online (Sandbox Code Playgroud)

gra*_*r31 3

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

  1. 禁用 QUnit 自动运行。
  2. 需要所有依赖项。
  3. 运行 QUnit。