我正在测试一个web组件。
以下是我的项目结构：
├── 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测试那个web组件。我在全球安装了该实用程序：
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中得到以下错误：
我缺少什么来正确运行测试？
我找到的唯一像样的材料是this one和that one但它们已经过时了。
最佳答案
有许多错误：
首先，请阅读最后一段中的全部文档，很明显，对于那些使用npm的用户，您需要通过wctPackageName获得额外的依赖关系：
希望支持基于npm的安装的组件应该包括
wct浏览器在其devDependencies中的遗留项，这是一个
仅包含执行WCT所需的客户端javascript
在基于npm的环境中进行测试。WCT将尝试确定
包通过检查是否兼容来提供客户端代码
按以下优先顺序包装：wct摩卡，
wct浏览器传统和web组件测试仪。如果要指定
哪个包提供WCT客户端代码，使用
--wct.conf.json中带有npm包名称的wct包名称标志或wct package name选项。
因此您需要在wct-browser-legacy中添加devDependencies
给出您的项目结构，您将app.js包括在同一级别上。应该是../src/app.js。
您应该将type="module"添加到该导入
您声明了一个fixture，但没有通过函数fixture
如果我必须纠正你的密码：
命令应该是wct --npm -wct-package-name=wct-browser-legacy。或者更好地创建一个包含以下信息的wct.conf.js文件：
module.exports = {
npm:true,
verbose: true,
plugins: {
local: {
browsers: ["chrome"]
}
},
wctPackageName: "wct-browser-legacy"
};您的测试应修改如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="../node_modules/web-component-tester/browser.js"></script>
<script src="../src/app.js"></script>
</head>
<body>
<test-fixture id="helloWorldFixture">
<template>
<hello-world>
</hello-world>
</template>
</test-fixture>
<script>
suite('<hello-world>', () => {
let component;
setup(() => {
component = fixture('helloWorldFixture');
});
test('contains hello world string ?', () => {
let index = component.innerText.indexOf('Hello');
assert.isAtLeast(index, 0);
});
});
</script>
</body>
</html>请注意，我使用了fixture的id，并将组件初始化放入
setup函数中。关于html - Web组件/HtmlElement:单元测试，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53463201/