我正在准备为Qunit编写一些针对ES6的Backbone应用程序进行测试,其中应用了babel.js,以便可以在当代浏览器中运行.为了确保我正确设置qunit并且所有路径都正确指定,我首先测试了一个在ES5中编写的骨干模型,并且一切都按预期工作.然而,然后我将bundle.js(其中包含我的ES6代码的结果和babel.js应用于它)包含在我的tests / index.html中,并写入
test ( "Code transformed by babel.js contained in bundle.js can be tested",function(){ expect(1); var es6model = new ES6Model(); equal( es6model.get("defaultproperty"),"defaultstring","defaultproperty should be defaultstring"); })
它告诉我ES6Model没有定义.
问题:有没有关于由babeljs转换的代码的东西,这将使使用Qunit进行测试更具挑战性?
除了babel在文件顶部写的所有复杂的js之外,bundle.js中的代码看起来像这样
var Model = Backbone.Model; var View = Backbone.View; var Collection = Backbone.Collection; var Router = Backbone.Router; var LocalStorage = Backbone.LocalStorage; var ES6Model = (function (Model) { function ES6Model() { _classCallCheck(this,ES6Model); if (Model != null) { Model.apply(this,arguments); } } _inherits(ES6Model,Model); _prototypeProperties(Gopher,null,{ defaults: { value: function defaults() { return { defaultproperty: "defaultstring" }; },writable: true,configurable: true } }); return ES6Model; })(Model);
更新
我将所有由babel.js创建的代码包含在一个名为bundle.js的文件中,并将其包含在我的index.html中,就像我想要的任何其他js文件一样,它运行没有问题,这就是为什么我假设我可以像任何其他js代码.然而,应该注意(正如评论者指出的),由babel.js创建的代码包含在一个模块中.这就是bundle.js从我试图测试的模型开始的
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ "use strict";
更新
我正在使用browserify将babel应用到我的ES6代码的各种文件中,这些文件创建了一个bundle.要运行测试,我做npm运行测试并编译bundle,我尝试这两个(其中一个使用模块–ignore),但是它们都不工作
“脚本”:{
"test": "./node_modules/karma/bin/karma start --log-level debug","build-js": "browserify app/app.js app/views.js app/models.js app/d3charts.js -t babelify > app/bundle.js","t-build": "browserify app/app.js app/views.js app/models.js app/d3charts.js -t [babelify --modules ignore] > app/test/test-bundle.js" },
(应用程序是Backbone.js应用程序).
这是我的karma配置文件.我没有任何进一步的配置(所以我猜我的karma需求的包含是浪费,但也许是必要的…)
module.exports = function(config) { config.set({ basePath: '',frameworks: ['qunit'],plugins: ['karma-qunit','karma-phantomjs-launcher','karma-requirejs'],files : [ 'app/test/jquery.js','app/test/d3.js','app/test/json2.js','app/test/underscore.js','app/test/backbone.js','app/backbone.localStorage.js','app/test/test-bundle.js','app/test/tests.js' ],reporters: ['progress'],// web server port port: 8080,// enable / disable colors in the output (reporters and logs) colors: true,// level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO,// enable / disable watching file and executing tests whenever any file changes autoWatch: false,// start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['PhantomJS'],// Continuous Integration mode // if true,Karma captures browsers,runs the tests and exits singleRun: true,// See https://stackoverflow.com/a/27873086/1517919 customLaunchers: { Chrome_sandBox: { base: 'Chrome',flags: ['--no-sandBox'] } } }); };
解决方法
为了参考,他们用traceur这样做的方法是将traceur-runtime.js文件编译成代码(参见
https://github.com/google/traceur-compiler/issues/777 – 一个类似的变量未定义的错误).
例如.
traceur – out / src / yourcode.js –script lib / traceur-runtime.js –script test / yourcode.js
(请参阅编译离线https://github.com/google/traceur-compiler/wiki/Compiling-Offline).