Question

我已经尝试将测试添加到我的网络应用程序样板文件中，该模板与gulp一起保存。

我添加了Karma / Mocha / Chai，我已经在Gulp手表中执行了测试：

gulp.task('watch', ['browserSync', 'build-css'], () => {
    gulp.watch('./app/scss/**/*.scss', ['build-css']);
  gulp.watch(['app/*.html', 'app/js/**/*.js'], browserSync.reload);     //Also reloads the browser when HTML or JS changes                  
    gulp.watch(['app/js/**/*.js', 'test/**/*.test.js'], ['test']);      //Re-run tests whenever JS or test changes
});

gulp.task('test',                                                       //Run tests once
    shell.task('karma start --single-run --browsers ChromeHeadless karma.conf.js')
);

在我的karma.conf.js我正在加载我的所有文件：

files: [
  'app/*.html',
  'app/css/*.css',
  'app/js/**/*.js',
  'test/**/*.test.js'
],

现在，实际的测试文件有效。如果我有这个：

script.test.js

describe('Array', () => {
    describe('#indexOf()', () => {
      it('should return -1 when the value is not present', () => {
        assert.equal(-1, [1,2,3,].indexOf(4));
      });
    });
  });

然后我得到一个通行证，没问题。

我遇到的问题是我的主要script.js文件导致Karma崩溃。我相信这是因为它试图操纵DOM。我有一个名为createUI的函数，它接受几个参数，其中一个参数是应该插入UI的页面元素的ID。当它正常运行时它完全按照我想要的方式工作，但是当Karma运行测试时，它给了我这个：

HeadlessChrome 64.0.3282 (Mac OS X 10.13.2) ERROR
  {
    "message": "Uncaught ReferenceError: table is not defined\nat /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/app/js/script.js:10:0 <- /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/195d5d9b0835bfdadaba24427f863496.browserify:11:43\n\nReferenceError: table is not defined\n    at Object.require./Users/jamesbrenton/Documents/webapp-boilerplate/app/js/script.js (/var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/app/js/script.js:10:0 <- /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/195d5d9b0835bfdadaba24427f863496.browserify:11:43)\n    at s (/var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/node_modules/browser-pack/_prelude.js:1:0 <- /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/195d5d9b0835bfdadaba24427f863496.browserify:1:273)\n    at app/js/script.js:1:34",
    "str": "Uncaught ReferenceError: table is not defined\nat /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/app/js/script.js:10:0 <- /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/195d5d9b0835bfdadaba24427f863496.browserify:11:43\n\nReferenceError: table is not defined\n    at Object.require./Users/jamesbrenton/Documents/webapp-boilerplate/app/js/script.js (/var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/app/js/script.js:10:0 <- /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/195d5d9b0835bfdadaba24427f863496.browserify:11:43)\n    at s (/var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/node_modules/browser-pack/_prelude.js:1:0 <- /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/195d5d9b0835bfdadaba24427f863496.browserify:1:273)\n    at app/js/script.js:1:34"
  }

如果我将函数调用包含在window.onload块中，如下所示：

的script.js

window.onload = function() {
    cards.createUI(deck, table);
};

然后测试似乎通过了。但是，我无法相信这是解决此问题的正确方法，因为代码在正常情况下可以正常工作。我可以延迟Karma开始测试直到加载DOM吗？或者我错过了什么？

JS用Karma / Mocha / Chai / Gulp测试

0 个答案: