現在のブラウザーで実行できるように、babel.js が適用された ES6 用に作成されたバックボーン アプリの Qunit を使用していくつかのテストを作成する準備をしています。qunit が適切に設定され、すべてのパスが適切に指定されていることを確認するために、ES5 で記述されたバックボーン モデルを最初にテストしたところ、すべてが期待どおりに機能しました。ただし、次にbundle.js(babel.js を適用した ES6 コードの結果を含む) を my に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定義されていないと言っています。
質問: Qunit を使用してテストすることをより困難にする、babeljs によって変換されたコードについて何かありますか?
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に含め、それを他の js ファイルと同じように index.html に含めます。問題なく実行されます。そのため、他の 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を使用して、バンドルを作成するES6コードのさまざまなファイルにbabelを適用しています。テストを実行しnpm run test、バンドルをコンパイルするには、これらの両方を試します (そのうちの 1 つは を使用します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']
}
}
});
};