how do you test polymer components written in ES6/ES2015 with web-component-tester?

Question

starting with polymer-starter-kit 1.1.0 I modified all existing code in the kit to ES6/ES2015, including the following: gulpfile.js, app.js, routing.html, my-greeting.html, my-list.html, my-greeting-basic.html and my-listing-basic.html. After following the instructions of the es6 babel recipe, found in the docs folder, I ran gulp serve to verify application works correctly and it does, except all of the existing tests fail with the following message ...

chrome 48                ✖ Test Suite Initialization

  Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

chrome 48                Tests failed: 2 failed tests

the above is true for chrome 41, firefox 44 and safari 9.0 as well

it seems like wct runs the uncompiled code and i can't find any options that will allow the wct gulp tasks to compile first or for that matter point to either the .tmp or dist folders to test.

here is one of the modified examples ...

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="my-list">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <ul>
      <template is="dom-repeat" items="{{items}}">
        <li><span class="paper-font-body1">{{item}}</span></li>
      </template>
    </ul>
  </template>
  <script>
    (() => {
      'use strict';

      class MyList {

        beforeRegister() {
          let is = this.constructor.name
            .replace(/\W+/g, '-')
            .replace(/([a-z\d])([A-Z])/g, '$1-$2')
            .toLowerCase();

          this.is = is;

          this.properties = {
            items : {
              type   : Array,
              notify : true,
            }
          };
        }

        ready() {
          this.items = [
            'Responsive Web App boilerplate',
            'Iron Elements and Paper Elements',
            'End-to-end Build Tooling (including Vulcanize)',
            'Unit testing with Web Component Tester',
            'Routing with Page.js',
            'Offline support with the Platinum Service Worker Elements'
          ];
        }
      }

      Polymer(MyList);
    })();
  </script>
</dom-module>

Answer 1

Until the offical Polymer-Starter-Kit adds documentation to the Add ES2015 support through Babel document, describing the prefered method of testing ES6/ES2015 code, my fork Polymer-Starter-Kit has a modified gulpfile.js and wtc.conf.js that allows ES6/ES2015 Elements, Tests & Code to test correctly.

Basically I modified the wtc.conf.js configuration file to point to dist instead of app for test suites and thebower_components path mapping. To make sure the project is built properly the wct gulp tasks, in gulpfile.js, were injected with the same dependencies as the gulp serve task.

DISCLAIMER - Let me say that I don't think is the ideal method, it's only a temporary patch solution so I can continue working with tests and ES2015.

I personally like how WTC currently doesn't require a build, making the development process more fluid and dynamic. Maybe, it can inject Babel browser support when it detects ES2015.