Web 组件/HtmlElement：单元测试答案

【问题标题】：Web Component / HtmlElement : unit testingWeb 组件/HtmlElement：单元测试
【发布时间】：2018-11-24 23:13:40
【问题描述】：

我正在尝试测试一个 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，但它们已经过时了。

【问题讨论】：

您还缺少一个带有 super() 调用的构造函数来启动正确的原型链。

标签： html unit-testing web-component web-component-tester

【解决方案1】：

有很多错误：

首先，请阅读最后一段中的整个文档，很明显，对于那些使用npm 的人，您需要通过wctPackageName 额外依赖：

希望支持基于 npm 安装的组件应包括 wct-browser-legacy 在他们的 devDependencies 中，这是一个包仅包含执行 WCT 所需的客户端 javascript 在基于 npm 的环境中进行测试。 WCT 将尝试确定哪些包通过检查兼容来提供客户端代码按以下优先顺序打包：wct-mocha， wct-browser-legacy 和 web-component-tester。如果你想指定哪个包提供 WCT 客户端代码，使用 --wct-package-name 标志或 wct.conf.json 中带有 npm 包名称的 wctPackageName 选项。

所以您需要在您的devDependencies 中添加wct-browser-legacy

给出您的项目结构，您将包含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 函数中。

【讨论】：

您的 WCT 知识似乎相当丰富 - 我可以请您查看“替代方案”，例如有一些设置的因果报应...这里是详细信息open-wc.org/recommendations/testing.html 会喜欢你的反馈:)
@Zakaria 你能看看我在stackoverflow.com/questions/57064334/… 中的问题吗？我试图复制你的所有建议，但我遇到了问题

【解决方案2】：

Zakaria 的回答很好，但我建议放弃 wct-browser-legacy 转而使用 wct-mocha，因为它重量更轻，并且没有旧版本的 lodash 和 sinon 等过时的依赖项。

请参阅 README 了解完整详情：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-mocha 不会自动加载。如果您使用 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>

【讨论】：