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

Question

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

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

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

感谢您的帮助!

Answer 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 目标，测试就会在控制台中 headless 运行。但是如果你喜欢 grunt test:browser，Grunt 将通过 open:test 打开一个浏览器。为了您的引用，我还包含了我的 open:test 配置:

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