Ste*_*fan 8 unit-testing web-component jestjs puppeteer
我想测试一些自定义 Web 组件并使用 jest.js 作为测试运行程序（由于它支持 ES6）。
Chromium 支持类似的命令
window.customElements.define('my-custom-element', MyCustomElementClass);
注册自定义 Web 组件。
但是，window.customElements在玩笑测试的上下文中似乎并不知道。
作为一种解决方法，我尝试将jest 与 puppeteer 和 express 结合使用，以customElements在 Chromium 中运行该部分。
但是，我很难TreezElement在评估的代码中注入自定义元素类：
treezElement.js：
class TreezElement extends HTMLElement {
connectedCallback () {
this.innerHTML = 'Hello, World!';
}
}
treezElement.test.js：
import TreezElement from '../../src/components/treezElement.js';
import puppeteer from 'puppeteer';
import express from 'express';
describe('Construction', ()=>{
let port = 3000;
let browser;
let page;
let element;
const width = 800;
const height = 800;
beforeAll(async () => {
const app = await express()
.use((req, res) => {
res.send(
`<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
</html>`
)
})
.listen(port);
browser = await puppeteer.launch({
headless: false,
slowMo: 80,
args: [`--window-size=${width},${height}`]
});
var pages = await browser.pages();
page = pages[0];
await page.setViewport({ width, height });
await page.goto('http://localhost:3000');
element = await page.evaluate(({TreezElement}) => {
console.log('TreezElement:')
console.log(TreezElement);
window.customElements.define('treez-element', TreezElement);
var element = document.create('treez-element');
document.body.appendChild(element);
return element;
}, {TreezElement});
});
it('TreezElement', ()=>{
});
afterAll(() => {
browser.close();
});
});
也许TreezElement是不可序列化的，因此undefined被传递给函数。
如果我尝试TreezElement直接从评估代码中导入自定义元素类...
element = await page.evaluate(() => {
import TreezElement from '../../src/components/treezElement.js';
console.log('TreezElement:')
console.log(TreezElement);
window.customElements.define('treez-element', TreezElement);
var element = document.create('treez-element');
document.body.appendChild(element);
return element;
});
...我得到了错误
'import' 和 'export' 可能只出现在顶层
=> 用玩笑测试自定义 Web 组件的推荐方法是什么？
一些相关的东西：
JSDOM 16.2包括对自定义元素的基本支持，并且在Jest 26.5及更高版本中可用。这是一个简单的 Jest 测试，显示它的工作原理：
\ncustomElements.define(\'test-component\', class extends HTMLElement {\n constructor() {\n super();\n const p = document.createElement(\'p\')\n p.textContent = \'It works!\'\n this.appendChild(p)\n }\n})\n\ntest(\'custom elements in JSDOM\', () => {\n document.body.innerHTML = `<h1>Custom element test</h1> <test-component></test-component>`\n expect(document.body.innerHTML).toContain(\'It works!\')\n})\n输出：
\n$ jest\n\nPASS ./test.js\n\xe2\x9c\x93 custom elements in JSDOM (11 ms)\n\nTest Suites: 1 passed, 1 total\nTests: 1 passed, 1 total\nSnapshots: 0 total\nTime: 1.409 s\nRan all test suites.\n请注意，尚未支持所有功能，尤其是Shadow DOM 不起作用。
\n| 归档时间： |
|
| 查看次数： |
7839 次 |
| 最近记录： |