Jestjs 使用Jest抛出错误的StencilJS单元测试

用于侦听从子级发出的单击事件的Jest单元测试用例正在抛出错误

expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

//.spec.ts代码

从“@stencil/core/testing”导入{newSpecPage}； 从“/my component”导入{MyComponent}； 从“/my embedded component”导入{MyEmbedded component}； 描述“点击事件”，=>{ 让页面； beforeachasync=>{ page=等待新闻页面{ 组件：[MyComponent，MyEmbeddedComponent]， html: }; }; 它“应该发出点击事件”，异步=>{ 让callbackFn=jest.fn； page.doc.addEventListener'clickCompleted'，callbackFn； const button=page.root.shadowRoot.querySelector'button'； 等待按钮。DispatchEvent新事件“单击完成”； 等待page.waitForChanges； 预期回拨n.to已回拨； }; }; //my-embedded-component.ts

从'@stencil/core'导入{Component，Prop，h，Event，EventEmitter}； @组成部分{ 标记：“我的嵌入式组件” } 导出类MyEmbeddedComponent{ @道具颜色：字符串； @事件clickCompleted:EventEmitter； 已完成handleclick{ console.log“发出clickCompleted事件”； 点击此按钮。点击完成。4； } 渲染{ 我是一个孩子； } } //my-component.tsx

从'@stencil/core'导入{Component，h，Listen}； @组成部分{ 标记：“我的组件”， styleUrl:'my component.css'， 影子：对 } 导出类MyComponent{ @听“点击完成” ListenClickComplete:CustomEvent{ console.log'listenClickCompleted'，e.detail； } 渲染{ 回来 ; } }

---

我推荐一种不同的方法来测试这种东西。测试通过直接调度事件来调度事件并不是真正的测试，即使在这种情况下它失败了。设计的功能是您应该测试的-单击按钮分派事件。因此，不要调用dispatchEvent，而是单击按钮：

let callbackFn = jest.fn();
page.doc.addEventListener('clickCompleted', callbackFn);
const button = page.root.shadowRoot.querySelector('button');
await button.click();
expect(callbackFn).toHaveBeenCalled();