Web / HtmlElement :单元测试
我在试着测试一个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中得到以下错误：
回答 2
Stack Overflow用户
发布于 2018-11-25 17:32:39
有许多错误：
- 首先，请阅读的整个文档，就像在最后一段中一样，对于那些使用
npm的用户来说，您需要通过wctPackageName获得额外的依赖：
希望支持基于npm的安装的组件应该在其devDependencies中包含WCT浏览器遗留文件，该包只包含在基于npm的环境中执行WCT测试所必需的客户端javascript。WCT将试图通过按以下优先顺序检查兼容的包来确定哪个包提供客户端代码:wct、wct浏览器遗留程序和web组件测试器。如果要指定哪个包提供WCT客户端代码，请在wct.conf.json中使用带有npm包名的-wct包名称标志或wct.conf.json选项。
所以您需要在您的wct-browser-legacy中添加devDependencies
- 给出您的项目结构，您所包含的
app.js就好像它在同一级别上一样。应该是../src/app.js。 - 应该将
type="module"添加到该导入中。 - 您声明了一个固定设备，但是通过函数
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>
请注意，我使用了夹具的id，并将组件初始化放在setup函数中。
Stack Overflow用户
发布于 2019-02-25 19:23:52
Zakaria的回答很好，但我建议放弃wct浏览器的传统，转而使用wct，因为它的重量更轻，而且没有过时的依赖项，比如旧版本的发舍和sinon等。
有关详细信息，请参见自述：https://www.npmjs.com/package/wct-mocha
tl;dr版本：
$ npm rm --save wct-browser-legacy
$ npm install --save-dev \
@webcomponents/webcomponentsjs \
@polymer/test-fixture \
wct-mocha \
mocha \
chai您不需要指定它，但是如果您有wct.conf.js文件，则应该将现有的wctPackageName条目更改为：
wctPackageName: "wct-mocha"您的HTML需要稍加修改，并且您需要确保mocha是一个直接的依赖项，因为wct不会自动加载。如果使用chai断言，还需要使用chai，如果使用这些断言，则需要使用@polymer/test-fixture。
<head>
<meta charset="utf-8">
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script src="../node_modules/@polymer/test-fixture/test-fixture.js"></script>
<script src="../node_modules/wct-mocha/wct-mocha.js"></script>
</head>https://stackoverflow.com/questions/53463201
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号