testing - Yeoman webapp generator - 如何在浏览器中运行 mocha 测试

Question

我有一些用 mocha/chai 编写的 JS 测试，我想在使用 webapp 生成器搭建的项目中运行它们。

我已将测试放在 Yeoman 结构中的“test”文件夹中，并且测试运行良好。但问题是该grunt test命令仅在控制台中显示测试结果，而不是在浏览器中。

我正在寻找一种运行命令并在浏览器中显示测试的方法。我怎样才能做到这一点？

谢谢你的帮助！

Answer 1

Please consider this part of connect's configuration (more precisely, this is a sub-task of connect):

test    : {
  options : {
    middleware : function(connect) {
      return [
        require('connect-livereload')(),
        mountFolder(connect, '.tmp'),
        mountFolder(connect, 'test')
      ];
    },
    port       : grunt.option('port') ? Number(grunt.option('port')) + 1 : 9001
  }
}

The above will make files from the specified folders available through http.

• .tmp is where my transpiled coffeescript and SCSS is landing as regular JS/CSS
• test is where my tests reside together with a very simple index.html file which wires all JS/CSS together, including mocha.js and mocha.css

Later in my Gruntfile I register the test task:

grunt.registerTask('test', function(target) {
  var tasks = [
    'clean:server',
    'coffee',
    'jst',
    'connect:test'
  ];

  if (target === 'browser') {
    tasks.push('open:test');
    tasks.push('watch');
  } else {
    tasks.push('mocha');
  }

  grunt.task.run(tasks);
});

The part which is relevant to your problem is 'connect:test' which makes it possible to access the tests through the browser, and this one:

  if (target === 'browser') {
    tasks.push('open:test');
    tasks.push('watch');
  } else {
    tasks.push('mocha');
  }

As long as you don't specify browser as your test target, the tests will run headlessly in the console. But if you go like grunt test:browser, Grunt will open a browser thanks to open:test. For your reference, I also include my open:test config:

test   : {
  path : 'http://localhost:<%= connect.test.options.port %>'
}