Web Component / HtmlElement : unit testing

Question

I\'m trying to test a web component. Here is my project structure :

├── package.json
├── src
│   ├── app.js
│   └── index.html
└── test
    └── hello-world-test.         


        

Answer 1

Zakaria's answer is good, but I suggest ditching wct-browser-legacy in favor of wct-mocha as it is lighter-weight and doesn't have out-of-date dependencies like old version of lodash and sinon etc.

See the README for full details: https://www.npmjs.com/package/wct-mocha

tl;dr version:

$ npm rm --save wct-browser-legacy
$ npm install --save-dev \
  @webcomponents/webcomponentsjs \
  @polymer/test-fixture \
  wct-mocha \
  mocha \
  chai

You shouldn't need to specify it, but if you have wct.conf.js file you should change an existing wctPackageName entry to:

wctPackageName: "wct-mocha"

Your HTML needs to change a little and you need to make sure mocha is a direct dependency, since wct-mocha will not autoload. You'd also need to do that with chai if you're using chai assertions and @polymer/test-fixture if you use those.