[英]Debugger setting breakpoints on transpiled file (VS Code, Node, ES6)
[英]testing code transpiled for es6
我准備用Qunit為一個為ES6編寫的Backbone應用程序編寫一些測試,並將babel.js應用於它,以便它可以在當代瀏覽器中運行。 為了確保我已正確設置qunit並正確指定所有路徑,我首先測試了用ES5編寫的Backbone模型,一切都按預期工作。 但是,然后我將bundle.js
(包含應用了babel.js的ES6代碼的結果)包含在我的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,n,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代碼的各種文件,這些文件創建了一個包。 為了運行測試,我做了npm run test
並編譯了bundle,我嘗試了這兩個(其中一個使用modules --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-require是浪費但可能是必要的......)
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 http://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 out/src/yourcode.js --script lib/traceur-runtime.js --script test/yourcode.js
(請參閱編譯離線https://github.com/google/traceur-compiler/wiki/Compiling-Offline )。
執行前將Babel生成的模塊導入測試(推薦)
您需要包含一個模塊加載器(例如SystemJS )來處理導入。 Babel擁有出色的模塊系統文檔 。
它看起來像這樣:
System.import( 'path/to/ES6Module' )
.then( function( ES6Module ) {
// … Run your tests on ES6Module here
});
注意: System.import()
返回一個Promise
,因此您的測試套件需要支持異步操作。
告訴Babel跳過模塊生成(更簡單)
您可以使用--modules ignore
標志告訴Babel不要將代碼包裝在模塊中。 這允許您的代碼設置全局變量,可立即用於單元測試。 不建議使用全局變量(特別是在生產系統中),但它們更易於應用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.