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

【问题标题】：Yeoman webapp generator - How to run mocha tests in the BrowserYeoman webapp generator - 如何在浏览器中运行 mocha 测试
【发布时间】：2014-03-24 21:59:35
【问题描述】：

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

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

我正在寻找一种方法来运行命令并在浏览器中显示测试。我该怎么做？

感谢您的帮助！

【问题讨论】：

标签： testing gruntjs mocha.js yeoman chai

【解决方案1】：

请考虑connect的这部分配置（更准确地说，这是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
  }
}

以上将通过http使指定文件夹中的文件可用。

.tmp 是我转译的 coffeescript 和 SCSS 作为常规 JS/CSS 登陆的地方
test 是我的测试和一个非常简单的 index.html 文件一起存放的地方，该文件将所有 JS/CSS 连接在一起，包括 mocha.js 和 mocha.css

稍后在我的 Gruntfile 中注册test 任务：

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

与您的问题相关的部分是'connect:test'，它可以通过浏览器访问测试，而这个：

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

只要您不将 browser 指定为您的 test 目标，测试就会在控制台中无头运行。但是如果你喜欢grunt test:browser，Grunt 将通过open:test 打开浏览器。供您参考，我还包括我的open:test 配置：

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

【讨论】：

太棒了！我会尽快试试这个。