Uncaught Error: WCT requires Mocha error in web-components-tester

Question

I want to setup the web-component-tester to test my web components. I installed it via npm (devDependency) and created the following script:

package.json:

  "scripts": {
    "wcttest": "./node_modules/.bin/wct --npm src/app/modules/essen/components/essen-list/test/wct-test.html"
  },

As the script states, I have the .html file located there. But now if I run the script npm run wcttest the following route opens:

http://localhost:8081/components/wc-frontend/generated-index.html?cli_browser_id=0 where wc-frontend is the root name of the project folder. But I dont get, why it opens the components path first.

The test opens all the browsers I intalled but there is nothing but a white page. If I open the console there is the following script:

<script>
WCT.loadSuites(["src/app/modules/essen/components/essen-list/test/wct-test.html"]);
<script>

Here the path looks correct.

wct-test.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <script src="../../../../../../../node_modules/mocha/mocha.js</script>
    <script src="../../../../../../../node_modules/wct-mocha/wct- 
    mocha.js"></script>
    <script src="../../../../../../../node_modules/web-component-tester/browser.js"></script>
    <script type="module" src="../essen-list.component.js"></script>
</head>
<body>
<mp-essen-list></mp-essen-list>

<script>

    suite('suite', function () {
        const list = document.body.querySelector('mp-essen-list');

        test('test', function () {
            list.setAttribute('value', 100);
            assert.equal(list.value, 100);
            //console.log('test');
            //assert.equal(list.shadowRoot.querySelector('#speisekarte').style.left, 50);
        });
    });

</script>
</body>
</html>

Edit: I noticed that it is not the wrong path. I looked into the console errors and found the following error:

wct-mocha.js:2446 Uncaught Error: WCT requires Mocha. Please ensure that it is present in WCT.environmentScripts, or that you load it before loading web-component-tester/browser.js
    at _ensureMocha (wct-mocha.js:2446)
    at Object.ensureDependenciesPresent (wct-mocha.js:2435)
    at HTMLDocument.<anonymous> (wct-mocha.js:2781)

Uncaught Error: WCT requires Mocha error in web-components-tester

0 Answers0