Vitest LitElement事件
Vitest LitElement事件
提问于 2022-06-28 08:58:29
我有一个故事书项目，在那里我使用Vite和LitElement组件。为了测试组件，我想我应该使用Vitest库。但是我不能真正测试我的组件，就像组件没有初始化/挂载/工作一样(但是它们在故事中工作得很好，所以我认为问题在于测试)。
我有一个面包屑组件，它在connectedCallback函数上分发一个自定义事件。关于我的故事，我可以听这个事件，所以我知道它是被派遣的。但我似乎可以测试一下。
我所拥有的：
- 在
connectedCallback函数
中的面包屑组件上
this.dispatchEvent(new Event('abc-breadcrumb-connected'));- on my breadcrumb.test.ts文件：
import type { IWindow } from 'happy-dom';
import { expect, describe, it, beforeEach, vi } from 'vitest';
import '../abc-breadcrumb';
import { AbcBreadcrumb } from "../abc-breadcrumb";
declare global {
interface Window extends IWindow {}
}
describe('Abc breadcrumb', async () => {
it('Dispatches connected event', async () => {
const mockConnectedCallback = vi.fn(() => true);
window.addEventListener('abc-breadcrumb-connected', () => {
console.log('GOT THE EVENT');
mockConnectedCallback()
});
document.body.innerHTML = `
<abc-breadcrumb role="nav" aria-label="Breadcrumb" class="breadcrumb" ismobile="">
...
</abc-breadcrumb>
`;
await window.happyDOM.whenAsyncComplete();
await new Promise(resolve => setTimeout(resolve, 0));
expect(mockConnectedCallback).toHaveBeenCalled();
})
});- 0 i vite.config.ts：
export default defineConfig({
test: {
globals: true,
environment: 'happy-dom',
},
...
})- 我得到的错误：
AssertionError: expected "spy" to be called at least once我不知道它为什么不起作用，如果能得到帮助，我会很高兴的。谢谢!
回答 1
Stack Overflow用户
发布于 2022-06-30 07:15:37
乍一看，使用await new Promise(resolve => setTimeout(resolve, 0));似乎是一种我无法成功地依靠自己来确保足够多的滴答数来完成各种操作的事情。这在我的本地浏览器中经常有效，但在CI中失败了，或者导致了片状测试。
为什么不设置这样的承诺:事件侦听器调用resolve()，甚至可能调用mockConnectedCallback()。然后，您可以确定事件不是触发的，而只是在setTimeout解析时没有触发。
const mockConnectedCallback = vi.fn(() => true);
let connectedResolve;
const connectedPromise = new Promise(r => connectedResolve = r);
window.addEventListener('abc-breadcrumb-connected', () => {
console.log('GOT THE EVENT');
connectedResolve();
mockConnectedCallback();
});
document.body.innerHTML = `
<abc-breadcrumb role="nav" aria-label="Breadcrumb" class="breadcrumb" ismobile="">
...
</abc-breadcrumb>
`;
await window.happyDOM.whenAsyncComplete();
await connectedPromise;
expect(mockConnectedCallback).toHaveBeenCalled();这使得expect()变得有点多余，因为它在等待的承诺解决之前是无法实现的，但是我认为等待一个明确的解决方案可以使事情更容易推理，而不是硬编码关于微任务队列和事情的各种假设到测试代码中，而测试代码常常会回来咬我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72783541
复制相关文章
相似问题
腾讯云开发者
