我正在尝试测试一个网络组件。 这是我的项目结构：
├── 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 file :
"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 and that one但它们已经过时了。
有很多错误：
npm你需要通过额外的依赖wctPackageName :希望支持基于 npm 的安装的组件应包括 wct-browser-legacy 在其 devDependency 中，这是一个包 仅包含执行 WCT 所需的客户端 JavaScript 在基于 npm 的环境中进行测试。 WCT 将尝试确定哪些 包通过检查兼容来提供客户端代码 软件包按以下优先顺序排列：wct-mocha， wct-browser-legacy 和 web-component-tester。如果你想指定 哪个包提供了WCT客户端代码，使用 --wct-package-name 标志或 wct.conf.json 中的 wctPackageName 选项与 npm 包名称。
所以你需要添加wct-browser-legacy在你的devDependencies
app.js就好像处于同一级别一样。它应该是../src/app.js.type="module"到那个进口如果我必须纠正你的代码：
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>请注意，我使用了灯具的 id 并将组件初始化放在setup功能。