Я пытаюсь протестировать веб-компонент.Вот моя структура проекта:
├── package.json
├── src
│ ├── app.js
│ └── index.html
└── test
└── hello-world-test.html
Вот мой рабочий код:
class HelloWorld extends HTMLElement {
connectedCallback () {
this.innerHTML = 'Hello, World!'
}
}
customElements.define('hello-world', HelloWorld);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="app.js"></script>
</head>
<body>
<hello-world></hello-world>
</body>
</html>
Я пытаюсь протестировать этот веб-компонент с помощью web-component-tester.Я установил утилиту глобально:
npm install -g web-component-tester
Я объявил ее в файле package.json:
"devDependencies": {
"web-component-tester": "^6.9.0"
}
, затем я записал свой тест в папку test и сохранил его вhello-world-test.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="../node_modules/web-component-tester/browser.js"></script>
<script src="app.js"></script>
</head>
<body>
<test-fixture id="hello-world-fixture">
<hello-world></hello-world>
</test-fixture>
<script>
suite('<hello-world>', function(){
let component = document.querySelector('hello-world');
test('contains hello world string ?', () => {
let index = component.innerText.indexOf('Hello');
assert.isAtLeast(index, 0);
});
});
</script>
</body>
</html>
Наконец, я набрал:
wct --npm
Затем получил в Chrome следующую ошибку:
Чего мне не хватает, чтобы правильно запустить тест?Единственные приличные материалы, которые я нашел, это этот и этот , но они устарели.