Stencil: Tests : SyntaxError: Unexpected token import

Created on 25 Apr 2018 · 4Comments · Source: ionic-team/stencil

Stencil version:

@stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
Tests failed on components importing an es6 module :

 FAIL  src\components\mwc-list-item\mwc-list-item.spec.ts
  ● Test suite failed to run

    D:\projets\material-web-components\node_modules\@material\ripple\index.js:18
    import MDCComponent from '@material/base/component';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (src/components/mwc-list-item/mwc-list-item.tsx:9:16)
      at Object.<anonymous> (src/components/mwc-list-item/mwc-list-item.spec.ts:3:23)

Expected behavior:
Tests should supports modules with es6 imports.

Steps to reproduce:

Write a component with

import { MDCRipple } from '@material/ripple'; or
import { MDCCheckbox } from '@material/checkbox';

Related code:

mwc-list-item.tsx :

import { Component, Prop, Element } from '@stencil/core';

import { MDCRipple } from '@material/ripple';
@Component({
  tag: 'mwc-list-item',
  styleUrl: 'mwc-list-item.scss',
  shadow: true
})
export class MWCListItem {
  @Prop() role: string;
  @Prop() disabled: boolean = false;
  @Prop() divider: boolean = false;

  @Element() host:HTMLElement;

  componentDidLoad(){
    const itemStart = this.host.shadowRoot.querySelector('.mdc-list-item__graphic');
    if(!itemStart.querySelector('slot').assignedNodes().length){
      itemStart.remove();
    }
    const itemEnd = this.host.shadowRoot.querySelector('.mdc-list-item__meta');
      if(!itemEnd.querySelector('slot').assignedNodes().length){
      itemEnd.remove();
    }
    MDCRipple.attachTo(this.host.shadowRoot.querySelector('.mdc-list-item'));
  }

  render() {
    return (
      <li class={{"mdc-typography" : true,"mdc-ripple-surface":true,"mdc-list-item":true,"mdc-list--non-interactive":this.disabled, "mdc-list-divider":this.divider}}
        role={this.role}
        tabindex={this.disabled ? -1 : 0}
        aria-disabled={this.disabled}
        >
        <div class="mdc-list-item__graphic">
          <slot name="item-start"></slot>
        </div>
        <slot />
        <div class="mdc-list-item__meta">
          <slot name="item-end"></slot>
        </div>
      </li>
    )
  }
}

mwc-list-item.spec.ts :

import { MWCListItem } from "./mwc-list-item";

describe('mwc-list-item', () => {
  it('should build', () => {
    expect(new MWCListItem()).toBeTruthy();
  });
});

Other information:

It seems to be related with :
https://github.com/facebook/jest/issues/2081

tests

Source