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

There are many errors :

• First, please read the whole documentation as in the last paragraph it's clear that for those who use npm you need an additional dependency through the wctPackageName :

Components which wish to support npm-based installation should include wct-browser-legacy in their devDependencies, which is a package that contains only the client-side javascript necessary for executing WCT tests in an npm-based environment. WCT will attempt to identify which package provides the client-side code by checking for compatible packages in the following order of preference: wct-mocha, wct-browser-legacy and web-component-tester. If you want to specify which package provides WCT client-side code, use the --wct-package-name flag or wctPackageName option in wct.conf.json with the npm package name.

So you will need to add wct-browser-legacy in your devDependencies

• Giving your project structure, you are including the app.js as if it was at the same level. It should be ../src/app.js.
• You should add the type="module" to that import
• You declared a fixture but didn't take profit of it through the function fixture

If I had to correct your code :

• The command should be wct --npm -wct-package-name=wct-browser-legacy. Or even better create a wct.conf.js file with the following information :

module.exports = {
    npm:true,
    verbose: true,
    plugins: {
        local: {
            browsers: ["chrome"]
        }
    },
    wctPackageName: "wct-browser-legacy"
};

• Your test should be modified as following :

Please, notice that I used the fixture's id and put the component initialisation in the setup function.