我想测试一些自定义 Web 组件并使用 jest.js 作为测试运行器(因为它支持 ES6)。
Chromium 支持类似的命令
window.customElements.define('my-custom-element', MyCustomElementClass);
注册自定义 Web 组件。
但是,
window.customElements
在开 Jest 测试的背景下似乎并不为人所知。作为一种解决方法,我尝试使用 玩偶结合 puppeteer 和 express 运行
customElements
部分 Chrome 。但是,我很难注入(inject)自定义元素类
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' and 'export' may only appear at the top level
=> 用 jest 测试自定义 Web 组件的推荐方法是什么?
一些相关的东西:
最佳答案
JSDOM 16.2包括对自定义元素的基本支持,在 Jest 26.5 中可用以上。这是一个简单的 Jest 测试,表明它可以正常工作:
customElements.define('test-component', class extends HTMLElement {
constructor() {
super();
const p = document.createElement('p')
p.textContent = 'It works!'
this.appendChild(p)
}
})
test('custom elements in JSDOM', () => {
document.body.innerHTML = `<h1>Custom element test</h1> <test-component></test-component>`
expect(document.body.innerHTML).toContain('It works!')
})
输出:$ jest
PASS ./test.js
✓ custom elements in JSDOM (11 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.409 s
Ran all test suites.
请注意,并非所有功能都受支持,尤其是 影子 DOM 不工作 .
关于unit-testing - 如何用 jest 测试自定义 Web 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57478484/