mã thử nghiệm được chuyển cho es6

Question

Tôi đang chuẩn bị viết một số bài kiểm tra với Qunit cho ứng dụng Backbone được viết cho ES6 với babel.js áp dụng cho nó để nó có thể chạy trong trình duyệt hiện đại. Để đảm bảo rằng tôi đã thiết lập qunit đúng và tất cả các đường dẫn được chỉ định đúng, trước tiên tôi đã thử nghiệm một mô hình Backbone được viết bằng ES5 và mọi thứ hoạt động như mong đợi. Tuy nhiên, tôi sau đó bao gồm bundle.js (trong đó có kết quả của mã ES6 tôi với babel.js áp dụng cho nó) vào tests/index.html của tôi, và đã viết

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"); 
}) 

và nó nói với tôi ES6Model không được định nghĩa.

Câu hỏi: có điều gì đó về mã được chuyển bởi babeljs có thể làm cho việc kiểm tra bằng Qunit trở nên khó khăn hơn?

Ngoài tất cả các js phức tạp mà babel viết ở phía trên cùng của tập tin, mã trong bundle.js trông như thế này

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); 

Cập nhật

tôi bao gồm tất cả các mã được tạo ra bởi babel.js trong một tệp có tên là bundle.js và bao gồm trong index.html của tôi giống như tôi sẽ làm bất kỳ tệp js nào khác và nó chạy mà không có vấn đề, đó là lý do tại sao tôi cho rằng tôi có thể kiểm tra nó giống như bất kỳ mã js nào khác. Tuy nhiên, cần lưu ý (như người bình luận đã chỉ ra) rằng mã được tạo bởi babel.js được chứa trong mô-đun..đây là cách bundle.js bắt đầu bằng mô hình tôi đang cố gắng kiểm tra sau

(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"; 

Cập nhật

Tôi đang sử dụng browserify để áp dụng babel cho các tệp khác nhau của mã ES6 tạo một gói. Để chạy các bài kiểm tra, tôi làm npm run test và biên dịch các bó, tôi thử cả hai trong số này (một trong số họ sử dụng modules --ignore) nhưng không ai trong số họ làm việc

"kịch bản": {

"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" 
    }, 

(Ứng dụng là một ứng dụng Backbone.js).

Đây là tệp cấu hình nghiệp của tôi. Tôi không có bất kỳ cấu hình thêm (vì vậy tôi đoán bao gồm của tôi về nghiệp-yêu cầu là một sự lãng phí nhưng có lẽ cần thiết ...)

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'] 
     } 
    } 
    }); 
}; 

Answer 1

Để tham khảo cách họ làm điều này với Traceur là để biên dịch tệp traceur-runtime.js vào mã (xem https://github.com/google/traceur-compiler/issues/777 - biến tương tự không được xác định lỗi).

Ví dụ:

traceur --out out/src/yourcode.js --script lib/traceur-runtime.js --script test/yourcode.js

(thấy Biên dịch ngoại tuyến https://github.com/google/traceur-compiler/wiki/Compiling-Offline).

Answer 2

nhập module Babel tạo thành thử nghiệm của bạn trước khi thực hiện (khuyến khích)

Bạn sẽ cần phải bao gồm một bộ nạp mô-đun (ví dụ SystemJS) để xử lý hàng nhập khẩu. Babel có excellent documentation cho hệ thống mô-đun của nó.

Nó trông giống như sau:

System.import('path/to/ES6Module') 
    .then(function(ES6Module) { 
    // … Run your tests on ES6Module here 
    }); 

Lưu ý:System.import() trả về một Promise, vì vậy bộ kiểm tra của bạn sẽ cần để hỗ trợ hoạt động không đồng bộ.

---

Nói Babel để bỏ qua thế hệ mô-đun (đơn giản)

Bạn có thể nói Babel đừng bó mã của bạn trong một mô-đun bằng cách sử dụng --modules ignore cờ. Điều này cho phép mã của bạn thiết lập các biến toàn cầu, ngay lập tức có sẵn cho các bài kiểm tra đơn vị của bạn. Các biến toàn cục là not recommended (đặc biệt là trong các hệ thống sản xuất), nhưng chúng đơn giản hơn để áp dụng.