- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想测试一些自定义 Web 组件并使用 jest.js 作为测试运行器(因为它支持 ES6)。
Chromium 支持类似的命令
window.customElements.define('my-custom-element', MyCustomElementClass);
window.customElements
在开 Jest 测试的背景下似乎并不为人所知。
customElements
部分 Chrome 。
TreezElement
在评估的代码中:
class TreezElement extends HTMLElement {
connectedCallback () {
this.innerHTML = 'Hello, World!';
}
}
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
最佳答案
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/
我使用 apt-get install libgtest-dev 安装了 gtest 我正在尝试检查它是否有效。 所以我在 eclipse 中编写了简单的测试代码。 但是有错误, undefined
($test) = (@test); $test = @test; 用一个括号括住变量,它访问数组的第一个元素。我找不到有关数组括号的信息。 最佳答案 ($test) = (@test); 这会将@t
在 clojure.test 中有一个允许同时测试多个设备的宏: are . 在 clojure.test 中,可以结合 are宏与 testing ? IE。就像是: (are [scenario
通常,Rust 中的单元测试被赋予一个单独的模块,该模块使用 #[cfg(test)] 进行条件编译: #[cfg(test)] mod tests { #[test] fn test
在过去,编程很少涉及猜测。我会写几行代码,一眼就能 100% 确定代码做什么和不做什么。错误主要是拼写错误,但与功能无关。 我相信在过去的几年中存在这种“试错”编程的趋势:编写代码(就像在草稿中一样)
在building the Kotlin compiler之后(在提交e80a01a处): ./gradlew dist 测试未成功通过: ./gradlew compiler:test 由于很少有测
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
最近一直在思考模糊测试和猴子测试的区别。根据 wiki,猴子测试似乎“只是”一个单元测试,而模糊测试则不是。安卓有 UI/Application Exerciser monkey而且它看起来不像是单元
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
现在我正在使用 CMake 设置一个 C++ 测试环境。其实我已经意识到我想做什么,但我对两种不同的测试输出风格感到困惑。在我下面的示例中,“make test”实际上做了什么?我认为“make te
在 VS2012 中运行单个测试时,测试资源管理器底部会显示一个窗口,其中包括(假设失败)旁边带有“测试失败”的红色图标。紧随其后的是带有“已用时间”的失败消息。 我想简单地知道是否有办法清除这个窗口
bash 是否可以从 shell 执行命令,如果它返回某个值(或空值)则执行命令? if [ "echo test" == "test"]; then echo "echo test output
这个问题在这里已经有了答案: 8年前关闭。 Possible Duplicate: What is a smoke testing and what will it do for me? 为什么“冒烟
x86 下的并行编程可能很困难,尤其是在多核 CPU 下。假设我们有多核 x86 CPU 和更多不同的多线程通信组合。 单一作者和单一读者 单个读者多个作者 多个读者和单个作者 多个读者和多个作者 那
我使用Ctest来运行一堆使用add_test()注册的Google测试。当前,这些测试没有任何参数。但是,我想在运行--gtest_output=xml时为它们提供所有参数(所有参数都通用,特别是c
我有下表和数据: CREATE TABLE `test` ( `id` int(11) NOT NULL auto_increment, `name` varchar(8) NOT NULL,
go test 的两个标志 -parallel 和 -test.parallel 之间的区别以及哪个标志优先? -parallel n Allow parallel execu
在我的组件 AudioPlayer 中,我有一个 download() 方法: download() { this.audio.pause(); window.open(this.file,
您必须承认,对于 Rails 和数据库的新手来说,rubyonrails.org 上的官方解释使所有这四个任务听起来完全一样。引用: rake db:test:clone Recreate the
我过去曾讨论过这个话题,我想我可能知道答案,但我无法正确地表达出来。 这是我认为我所知道的: 如果您在编写测试之前已经有了关于事情如何工作的想法,那么我怀疑您是测试优先而不是测试驱动,因此您首先编写测
我是一名优秀的程序员,十分优秀!