[wct headless] tests failing when using import

[thescientist13]

Hello! 👋

I've been looking at Web Component Tester for headless unit testing of Custom Elements, and while I have a basic implementation configured (using a test/index.html to bootstrap everything and a test is working there), I'm having trouble with trying out a test to ES2015 import to load components for testing.

Here is the test

import { word } from '../src/index';

describe('basic testing suite', () => {
  
  it('should be true', () => {
    const bool = true;

    expect(bool).to.equal(true);
  });

});

describe('testing word', () => {
  
  it('should be hello', () => {
    expect(word).to.equal('hello');
  });

});

Here is index.js

const word = 'hello';

export default word;

The error output

$ yarn test
yarn run v1.7.0
$ wct --npm --expanded
Installing and starting Selenium server for local browsers
Selenium server running on port 62819
[BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.
chrome 67                Beginning tests via http://localhost:8081/components/component-simple-slider/generated-index.html?cli_browser_id=0
chrome 67                ✖ Test Suite Initialization

  Unexpected token {

chrome 67                ✓ test/ » test basic element from index.html » <p> should say hello world
chrome 67                Tests failed: 1 failed tests
Test run ended in failure: 1 failed tests

chrome 67 (1/0/1)


Error: 1 failed tests

error Command failed with exit code 1.

Now, I recognize this could be a browser issue, but the version of Chrome shown in the terminal output is 67, which should have support for import?

Is this expected? Should I be doing some additional configuration in WCT?

Let me know if you need anymore info, here is a branch with all the code and configuration. Just run yarn install && yarn test to reproduce.

Thanks!

[Westbrook]

Interesting usage. While WCT.loadSuites() IS set up to load JS files, I'm not sure it's set up to work directly with modules, that could be a useful feature add. If you want to work around it for now, you can do the following. First, change index.spec.js to an HTML files, shaped like:

<script src="../node_modules/wct-browser-legacy/browser.js"></script>

<script type="module">
import {default as word} from '../src/index.js';

describe('basic testing suite', () => {
  it('should be true', () => {
    const bool = true;
    expect(bool).to.equal(true);
  });
});

describe('testing word', () => {
  it('should be hello', () => {
    expect(word).to.equal('hello');
  });
});
</script>

Notice the inclusion of wct-browser-legacy/browser.js and the move to import {default as word} from '../src/index.js'; in your import statement.

Then you can get this called from index.html with:

WCT.loadSuites([
  './test.html'
]);

This will have you up and running until someone can decide whether direct support of modules in WCT.loadSuites() can be decided on separately.

[thescientist13]

Great, thanks so much for the reply and advice. Will give this a try!

[thescientist13]

Just my $.02 re: the use of import with WCT but in my own experiences when working with React, Jest + Enzyme provided what I found to be a fairly intuitive workflow in terms of how to write and test components.

I was also seeing similar developer experiences with @skatejs/ssr.

Taking this very simple example, It would be pretty neat (IMHO) to be able to do something similar when using WCT.

hello-component.js

class HelloComponent extends HTMLElement {

  constructor() {
    super();

    this.root = this.attachShadow({ mode: 'closed' });
    this.root.innerHTML = this.template();
  }

  template() {
    return `
      <h3>Hello World!<h3>
    `;
  }

}

customElements.define('x-hello', HelloComponent);

hello-component.spec.js

import './hello.component.js';
import { mount } from '@skatejs/bore';  // or whatever DOM testing library you like

describe('HelloComponent', () => {
  let component;
 
  beforeEach(() => {
    component = mount('<x-hello></x-hello>');
  })

  it('should render Hello World', () => {
    expect(component.innerHTML).toBe('Hello World!');
  });

  it('should have an <h3> element', () => {
    expect(component.find('h3').length).toBe(1);
  });

});

[thescientist13]

Thanks for your help @Westbrook , I got it working and was able to keep the specs in JavaScript (albeit without import) but I like the IDE / tooling support this offers, so that's definitely a win. 👍

index.html

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <script src="../node_modules/wct-browser-legacy/browser.js"></script>
    <script src="../node_modules/@polymer/test-fixture/test-fixture-mocha.js"></script>
    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    <script type="module" src="../src/index.js"></script>

    <test-fixture id="hello">
      <template>
        <eve-hello></eve-hello>
      </template>
    </test-fixture>
      
    <script>
      WCT.loadSuites([
       './hello-world.spec.js'
      ]);
    </script>

  </head>
  
</html>

hello-world.spec.js

describe('HelloComponent', function() {
  let componentRoot;

  beforeEach(() => {
    componentRoot = fixture('hello').root;
  });

  describe('heading', () => {
    let heading;

    beforeEach(() => {
      heading = componentRoot.querySelectorAll('h3.heading');
    });

    it('should have one heading element', () => {
      expect(heading.length).to.equal(1);
    });

    it('should say Hello World!', () => {
      expect(heading[0].innerHTML).to.equal('Hello World!');
    });
  });

});

Thanks for your help!! Native import support would be nice for this. I suppose I can leave this issue open and see if any of the maintainers have any thoughts. Otherwise, onwards and upwards for me 🚀

[thescientist13]

Documented my efforts so far with WCT.
https://github.com/ProjectEvergreen/project-evergreen/wiki/Unit-Testing

Thanks for your help!